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. 三篇IMO的文章

    http://column.iresearch.cn/b/201411/687499.shtml?from=singlemessage&isappinstalled=1 http://colu ...

  2. Windows Azure入门教学系列 (九)：Windows Azure 诊断功能

    本文是Windows Azure入门教学的第九篇文章. 本文将会介绍如何使用Windows Azure 诊断功能.跟部署在本地服务器上的程序不同,当我们的程序发布到云端之后,我们不能使用通常的调试方法 ...

  3. webview加载网页加载不出来

    1.webView.loadUrl(picTargetUrl); 写在最前面. 1.在无线城市迷你版的项目,用webview去loadUrl的时候出现加载的现象. url 地址是 http://go. ...

  4. dos批量替换当前目录后缀名

    有时候有些后缀名不满足条件,就需要进行批量的替换,如果人为的去替换,那么如果量少的话还好说,量多的话一个个去替换就太傻了,今天从网络上面查找了一些批量替换的dos命令,用起来还挺好用的,就直接把代码贴 ...

  5. C++学习之路—继承与派生（四）拓展与总结

    (根据<C++程序设计>(谭浩强)整理,整理者:华科小涛,@http://www.cnblogs.com/hust-ghtao转载请注明) 1    拓展部分 本节主要由两部分内容组成,分 ...

  6. Linux Crontab 定时任务使用总结

    任务调度的crond常用命令 crond 是linux用来定期执行程序的命令.当安装完成操作系统之后,默认便会启动此任务调度命令.crond命令每分锺会定期检查是否有要执行的工作,如果有要执行的工作便 ...

  7. android在eclipse中打包（签名包）方法及常见问题解决

    打包成apk 右键单击项目名称,选择"Android Tools".再选择"Export Signed Application Package-",例如以下图所 ...

  8. android.graphics.Color

    该类定义的都是些static常量和函数,这些函数都是为了创建和转化成int型的color.颜色是由int型的数表示,由4个字节组成,分别是A R  G  B,这个int型的值是确定的,透明度的值只能存 ...

  9. FastDFS概要

    本篇文章是我上级老大所写. 留在这里为了不弄丢. FastDFS是一款开源的轻量级分布式文件系统 纯C实现,支持Linux, FreeBSD等UNIX系统 类google FS, 不是通用的文件系统, ...

  10. PIL Gif分割成多个图片

    项目中遇到GIF图片读取问题,使用PIL中Image im=Image.open("D:\\yzm\\0009.gif") mode = 'RGB' im.seek(0) im.c ...