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. Swift - 使用UISearchController实现带搜索栏的表格

    我原来写过一篇文章“Swift - 带结果列表的搜索条(UISearchDisplayController)的用法”,当时是使用UISearchDisplayController来实现带有搜索功能的列 ...

  2. 怎样在ios开发中设置tableview的cell颜色

    //方法一: cell .contentView .backgroundColor = [ UIColor redColor ]; //方法二: UITableViewCell *cell = [ta ...

  3. Win2003 Server磁盘配额揭密之启用篇

    Win2003 Server磁盘配额揭密之启用篇 ［ 作者:茶乡浪子    转贴自:it168.com    点击数:4973    更新时间:2005-1-17  ］   本文要向大家介绍如何利用W ...

  4. uvc摄像头代码解析6

    10.扫描视频设备链和注册视频设备 10.1 uvc视频链 struct uvc_video_chain { //uvc视频链 struct uvc_device *dev; //uvc设备 stru ...

  5. Qt中用正則表達式来推断Text的语种，主要通过推断unicode的编码范围

    QString MainWindow::ParseLanguage(QString Text) {     if(Text.length()<=0)     {         return & ...

  6. 男性在下一100层【第三层】——高仿手机银行client接口

    前言: 从<男性在下一100层>系列博文[二楼]现在出版了整整三个月后,.从上述观点和这么多朋友的意见还是比较喜欢真实类的博文. 毕竟我们都叫"攻城狮".所以要看是否这 ...

  7. 【环境配置】配置sdk

    1. 安装和配置 (1) 下载sdk 官方下载地址http://developer.android.com/sdk/index.html 这里以android-sdk_r12-linux_x86.tg ...

  8. 一种根据URL参数条件动态生成URL的方法

    最近做了一个产品列表页类似于搜索列表页, 功能比较简单,比搜索页复杂的逻辑在于,生成各个查询条件的URL.我们的链接如下: http://xxx.xxx.xxx/product/list.html?s ...

  9. PLSQL数据导入

    导入数据 (1)      首先以管理员身份登录plsql; (2)      新建命令窗口 (3)      创建用户,设置帐号,密码 创建语句:create user usernameidenti ...

  10. android平台中，EventBus研究学习

             当一个Android应用功能越来越多的时候.app中各个部分之间通信.往往採用Observer的方式来进行,即注冊----通知----注销的方式运行 各类控件常常须要依据某个状态来更 ...