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. 我的mysql数据库sql优化原则

    原文 我的mysql数据库sql优化原则 一.前提 这里的原则 只是针对mysql数据库,其他的数据库 某些是殊途同归,某些还是存在差异.我总结的也是mysql普遍的规则,对于某些特殊情况得特殊对待. ...

  2. WEB相关协议

    1.数据链路层 2.网络层 3.传输层 4.应用层 ,其中ip是在第二层网络层中,tcp是在第3层传输层中,Internet体系结构最重要的是tcp/ip协议,是实现互联网络连接性和互操作性的关键,它 ...

  3. 【图像识别】 图像处理和图像分析（leptonica）leptonica-1.68安装配置 （vs2008）

    Leptonica Leptonica is a pedagogically-oriented open source site containing software that is broadly ...

  4. SRM 582 Div II Level Three： ColorTheCells, Brute Force 算法

    题目来源:http://community.topcoder.com/stat?c=problem_statement&pm=12581 Burte Force 算法,求解了所有了情况,注意  ...

  5. AssertValid函数学�

    转自http://tsitao.blog.163.com/blog/static/29795822006914105840496/ VC的调试中,AssertValid和Dump函数的应用 CObje ...

  6. smartforms客制页格式

    smartforms需要打印非A4纸时需要手动创建页格式:创建事务代码:spad, 操作的时候需要 把所有步骤都做一遍方可正常打印,不然只能停留在预览界面无法打印.

  7. delphi之完美Splash方案（在TfrmMain.FormCreate里不断调用TfrmSplash显示加载进度文字，并且及时Update显示）

    前言:网上有很多介绍delphi创建闪屏的代码,大多只是在程序开启前显示一个闪屏,但是却没有说如何在闪屏上显示程序加载的进度,于是笔者有意思介绍一下这种闪屏方式. 1.创建一个窗体(TfrmSplas ...

  8. [置顶] 自己动手写Web容器之TomJetty之六：动态页面引入

    传送门 ☞ 1.Web服务内功经脉 传送门 ☞ 2.让服务动起来 传送门 ☞ 3.掀起请求盖头来 传送门 ☞ 4.静态页面起步 传送门 ☞ 5.包装请求参数 在上一节,我们已经完成了TomJetty服 ...

  9. Swift 可展开可收缩的表视图

    主要学习与运行效果 在本节的内容中,我们将通过一个具体实例的实现过程,详细讲解在表视图当中,如何创建一个可展开可收缩的表视图.为了让读者有着更为直观的印象,我们将通过模仿QQ好友列表来实现这个效果. ...

  10. Swift - 类初始化和反初始化方法（init与deinit）

    1,init():类的初始化方法(构造方法) 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 ...