0.前言
    水平居中基本方法——指定块的宽度并设定块的左右外边距为auto，上下外边距可取0，那么该块能够在父元素中水平居中。
样式例如以下：
1：margin:0px auto
2：margin-left:auto; margin-right:auto;
    垂直居中基本方法——设定块的上下内边距相等。
样式例如以下：
    padding-top:20px; padding-bottom:20px;

1.div居中对齐

【HTML】
<!DOCTYPE html>

<html>

<head>

<style>

#all{

    margin:0px auto;

    width:500px; /* 必须制定宽度 */

    height:200px;

    background-color:blue;

}

</style>

</head>

<body>

<div id="all">

<div>

</body>

</html>
【效果】
【1】body中有一个ID为all的块，该块的宽度为500px，高度为200px。通过margin:0px auto在body中水平居中。

图1 div居中

2.div中文字居中
【HTML】
<!DOCTYPE html>

<html>

<head>

<style>

#all{

    margin:0px auto;

    width:500px; /* 必须制定宽度 */

    height:200px;

    background-color:blue;

}

#string{

    margin:0px auto;

    width:300px;

    height:100px;

    background-color:red;

    text-align:center; /* 文字居中 */

    font-size:32px; /* 文字大小 */

    color:white; /* 文字颜色 */

}

</style>

</head>

<body>

<div id="all">

<div id="string">center<div>

<div>

</body>

</html>
【效果】
【1】body中有一个ID为all的块，该块的宽度为500px，高度为200px。在body中水平居中。
【2】在名称为all的块中有一个ID为string的块。通过margin:0px auto使得该块在父元素中水平居中。

text-align:center使得


图2 div 文字水平居中

3 div图片居中
【HTML】
<!DOCTYPE html>

<html>

<head>

<style>

#all{

    margin:0px auto;

    width:500px; /* 必须制定宽度 */

    height:200px;

    background-color:blue;

}

#string{

    margin:0px auto;

    width:300px; /* 必须制定宽度 */

    height:100px;

    background-color:red;

    text-align:center; /* 文字居中 */

    font-size:32px; /* 文字大小 */

    color:white; /* 文字颜色 */

}

#image{

    margin:0px auto;

    width:300px; /* 必须制定宽度 */

    background-color:white;

    text-align:center; /* 图像居中 */

    padding-top:20px; /* 图像上填充 */

    padding-bottom:20px; /* 图像下填充 */

}

</style>

</head>

<body>

<div id="all">

<div id="string">center</div>

<div id="image"><img src="loader.gif"></div>

</div>

</body>

</html>
【效果】
【1】图片在div中居中的方法和文字同样，父div中设定text-align:center就可以。
【2】假设须要图片垂直居中，那么能够设定父div的上下内边距。比如 padding-top:20px;padding-bottom:20px;

图3 div中图像水平居中

4.表格内容居中
【HTML】——HTML写法
<!DOCTYPE html>

<html>

<head>

<style>

#all{

    margin:0px auto;

    width:500px; /* 必须制定宽度 */

    height:200px;

    background-color:blue;

}

</style>

</head>

<body>

<div id="all">

<!-- 表格在父窗口中居中 -->

<table width="80%" align="center" border="1">

<tbody>

<!-- 单元格居中 -->

<tr height="50px"><td align="center">文字居中</td></tr>

<tr height="50px"><td align="center"><img src="loader.gif"></td></tr>

</tbody>

</table>

</div>

</body>

</html>
【效果】
【1】<table align="center" > 使得表格在父div中水平居中。
【2】<td align="center"> 使得单元格中的内容水平居中，请注意单元格中的内容默认垂直居中。

图4 表格内容居中——HTML写法

【HTML】CSS写法
<!DOCTYPE html>

<html>

<head>

<style>

#all{

    margin:0px auto;

    width:500px; /* 必须制定宽度 */

    height:200px;

    background-color:blue;

}

/* 设置边框 */

table, th, td{

    border: 1px solid black;

}

/* 设置table位置 */

table{

    margin:0px auto; /* 效果等同 <tabel align="center">*/

    width:80% /* 必须制定宽度 */

}

/* 单元格对齐 */

td{

    text-align:center;

}

</style>

</head>

<body>

<div id="all">

<table>

<tbody>

<tr height="50px"><td>文字居中</td></tr>

<tr height="50px"><td><img src="loader.gif"></td></tr>

</tbody>

</table>

</div>

</body>

</html>
【效果】
【1】table{margin:0px auto;}，使得表格在父div中水平居中
【2】td{text-align:center;}，单元格内容水平居中，请注意td{text-align:center;}和<td align="center">有同样效果。
【3】效果和如图4所看到的。

參考资料

HTML学习笔记——各种居中对齐的更多相关文章

  1. Bootstrap学习笔记之文本对齐风格

    文本对齐风格 在排版中离不开文本的对齐方式.在CSS中常常使用text-align来实现文本的对齐风格的设置.其中主要有四种风格: ☑  左对齐,取值left ☑  居中对齐,取值center ☑   ...

  2. 毕业设计 之 二 PHP学习笔记（一）

    毕业设计 之 二 PHP学习笔记(一) 作者:20135216 平台:windows10 软件:XAMPP,DreamWeaver 一.环境搭建 1.XAMPP下载安装 XAMPP是PHP.MySQL ...

  3. css居中学习笔记

    css居中学习笔记 一.水平居中 以下面的代码为例: <body> <div class="parent"> <div class="chi ...

  4. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  5. Android学习笔记（七）——常见控件

    //此系列博文是<第一行Android代码>的学习笔记,如有错漏,欢迎指正! Android 给我们提供了大量的 UI控件,下面我们简单试试几种常用的控件. 一.TextView 在布局文 ...

  6. Java-Eclipse插件开发学习笔记

    Eclipse插件 学习笔记 作者   Rick- Bao 开始日期  2014年8月26日 结束日期  2014年8月27日 一 . CVS(current version system) 版本控制 ...

  7. Web前端学习笔记(001)

    ....编号    ........类别    ............条目  ................明细....................时间 一.Web前端学习笔记         ...

  8. AngularJs学习笔记--html compiler

    原文再续,书接上回...依旧参考http://code.angularjs.org/1.0.2/docs/guide/compiler 一.总括 Angular的HTML compiler允许开发者自 ...

  9. Bootstrap学习笔记(一) 排版

    Bootsrap是一款优秀的前端开发框架,我从慕课网上开始学习Bootstrap,以下我学习过程中的一些笔记及代码. 首先学习排版: 从Bootstrap网站下载Bootstrap3中文文档(V3.3 ...

随机推荐

  1. IMAP和POP3有什么差别?

    servCode=6010376">POP3协议同意电子邮件client下载server上的邮件,可是在client的操作(如移动邮件.标记已读等),不会反馈到server上.比方通过 ...

  2. 使用POI创建Excel文件下载

    POIExcelUtils.java: package com.saicfc.pmpf.internal.manage.utils; import java.io.File; import java. ...

  3. HTML学习笔记（七）

    1．       假设想让div中的内容(content)垂直居中,能够将line-height的值设置与div的高度相等来实现. 2．       超伪类链接的四种形式: watermark/2/t ...

  4. 立波 iphone3gs越狱教程:成功把iphone3gs手机升级成ios6.1.3系统,完美越狱,解决no service和耗电量大的问题

    前几天,老婆使用的iphone3gs摔地了,把手机里的连接电源的那个神马线给搞坏了,结果花了200多块大洋修好了: 修好后,老婆抱怨道:5年了,这手机好多软件都装不上,说手机版本号太低了, 我就说凑合 ...

  5. MSSQL - 存储过程事物

    效果: 创建带有事物的存储过程: use sales --指定数据库 create table bb --创建bb 这个表 ( ID int not null primary key ,--账号 Mo ...

  6. Cookie例子

    马士兵老师的~~ cookie是服务器将信息保存在客户端的一个表示方式 名-值 服务器只能写入文档文件 每个浏览器都有唯一的标识号 且每个浏览器只允许访问与自身相关的cookie的内容 cookie分 ...

  7. asp.net下利用MVC模式实现Extjs表格增删改查

    在网上看到有很多人写extjs下的表格控件的增删改查,但是大多数都是直接从后台读取数据,很少有跟数据库进行交互的模式. 今天就来写一个这样的例子.欢迎大家交流指正. 首先简单介绍一下MVC模式,MVC ...

  8. 带dos调试窗口的win32程序

    #pragma comment( linker, "/subsystem:\"console\" /entry:\"WinMainCRTStartup\&quo ...

  9. java学习笔记-继承中super关键字

    背景: 在java继承的概念中我们得知,被声明为私有的类成员对所属的类来说仍然是私有的.类之外的任何代码都不能访问,包括子类. super关键字的两种用法: 1.用于调用超类的构造函数: 2.用于访问 ...

  10. Storm流计算从入门到精通之技术篇(高并发策略、批处理事务、Trident精解、运维监控、企业场景)

    1.Storm全面.系统.深入讲解,采用最新的稳定版本Storm 0.9.0.1 :   2.注重实践,对较抽象难懂的技术点如Grouping策略.并发度及线程安全.批处理事务.DRPC.Storm ...