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. JQuery AJAX Demo

    JQuery AJAX Demo APP发展集团:347072638(HTML5,APP) 1.先看一个JQuery AJAX Demo HTML端: <!DOCTYPE html PUBLIC ...

  2. Ural1109_Conference(二分图最大匹配/匈牙利算法/网络最大流)

    解题报告 二分图第一题. 题目描写叙述: 为了參加即将召开的会议,A国派出M位代表,B国派出N位代表,(N,M<=1000) 会议召开前,选出K队代表,每对代表必须一个是A国的,一个是B国的; ...

  3. HttpWebRequest 基础连接已经关闭: 接收时发生错误

    HttpWebRequest request = null; Stream webStream = null; HttpWebResponse response = null; StreamReade ...

  4. IOS详解TableView——对话聊天布局的实现

    上篇博客介绍了如何使用UITableView实现类似QQ的好友界面布局.这篇讲述如何利用自定义单元格来实现聊天界面的布局. 借助单元格实现聊天布局难度不大,主要要解决的问题有两个: 1.自己和其他人说 ...

  5. Linux编译多个不同目录下的文件以及静态库、动态库的使用

    先看两篇博文,作为基础知识.如果对C/C++编译链接过程都了解的话,可以跳过不看. http://www.firedragonpzy.com.cn/index.php/archives/2556 ht ...

  6. java WEB Response重定向和缓存控制

    package cn.com; import java.io.IOException; import javax.servlet.ServletException; import javax.serv ...

  7. Cordys BOP 4平台开发入门实战演练——Webservices开发（0基础）

    0.文章导读 本文档针对Cordys BOP-4 WS-AppServer基础功能进行验证和高速开发指导.(高级实践文档请參考兴许文档). 0.1.WS-AppServer概述 WS-AppServe ...

  8. MapReduce整体架构分析

    继前段时间分析Redis源代码一段时间之后.我即将開始接下来的一段技术学习的征程.研究的技术就是当前很火热的Hadoop,可是一个Hadoop生态圈是很庞大的.所以首先我的打算是挑选当中的一部分模块, ...

  9. 使用JDK自带的工具将中文转换为ascii码

    有时候在MyEclipse中,文件只能保存为“ISO-8859-1”的类型,而这种类型的文件时无法保存中文数据的,那么我们只能将中文数据经过Unicode编码才能往文件中保存,这里可以使用JDK自带的 ...

  10. Android中 Bitmap Drawable Paint的获取、转换以及使用

    比如Drawable中有一系列连续的图片,img_0.png, img_1.png, img_2.png ... 如果要动态获取这些图片,通过"R.drawable.img_x"的 ...