1.行内元素：

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。

<body>

  <div class="txtCenter">我想要在父容器中水平居中显示。</div>

</body>

<style>

  .txtCenter{

    text-align:center;

  }

</style>

2.块状元素：

当被设置元素为 块状元素 时用 text-align：center 就不起作用了，这时也分两种情况：定宽块状元素和不定宽块状元素。

A.定宽块状元素

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。（注意：元素的“上下 margin值” 是可以随意设置的。）

<body>

  <div>我是定宽块状元素，哈哈，我要水平居中显示。</div>

</body>

<style>

div{

    border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/

    width:200px;/*定宽*/

    margin:20px auto;/* margin-left 与 margin-right 设置为 auto */

}

</style>

B.不定宽块状元素（不定宽块状元素：块状元素的宽度width不固定。）

1) 加入 table 标签

利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。

第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。

第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。

举例如下：

<div>

 <table>

  <tbody>

    <tr><td>

    <ul>

        <li>我是第一行文本</li>

        <li>我是第二行文本</li>

        <li>我是第三行文本</li>

    </ul>

    </td></tr>

  </tbody>

 </table>

</div>

<style>table{

     border:1px solid;

     margin:0 auto;

}

2) 将块级元素的 display 转化为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果。

<body>

<div class="container">

    <ul>

        <li><a href="#">1</a></li>

        <li><a href="#">2</a></li>

        <li><a href="#">3</a></li>

    </ul>

</div>

</body>

<style>

.container{

    text-align:center;

}/* margin:0;padding:0（消除文本与div边框之间的间隙）*/

.container ul{

    list-style:none;

    margin:0;

    padding:0;

    display:inline;

}/* margin-right:8px（设置li文本之间的间隔）*/

.container li{

    margin-right:8px;

    display:inline;

}

</style>

3) 通过给父元素设置float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

 <body>

 <div class="container">

     <ul>

         <li><a href="#">1</a></li>

         <li><a href="#">2</a></li>

         <li><a href="#">3</a></li>

     </ul>

 </div>

 </body>

 <style>

 .container{

     float:left;

     position:relative;

     left:50%

 }

 .container ul{

     list-style:none;

     margin:0;

     padding:0;

     position:relative;

     left:-50%;

 }

 .container li{float:left;display:inline;margin-right:8px;}

 </style>

CSS中水平居中设置的几种方式的更多相关文章

  1. CSS中清除浮动的两种方式

    在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: <div cl ...

  2. CSS实现水平垂直居中的1010种方式

    转载自:CSS实现水平垂直居中的1010种方式 划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居 ...

  3. css中的浮动与三种清除浮动的方法

    说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top ...

  4. javascript总结40:DOM中操作样式的两种方式

    1 DOM中操作样式的两种方式 1 通过元素的style属性 注意: 通过style属性设置样式时,css中要写单位的属性,在js代码中也要加单位 //html <div id="bo ...

  5. CSS中隐藏内容的3种方法及属性值

    CSS中隐藏内容的3种方法及属性值 (2011-02-11 13:33:59)   在制作网页时,隐藏内容也是一种比较常用的手法,它的作用一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出 ...

  6. jQuery中开发插件的两种方式

    jQuery中开发插件的两种方式(附Demo) 做web开发的基本上都会用到jQuery,jQuery插件开发两种方式:一种是类扩展的方式开发插件,jQuery添加新的全局函数(jQuery的全局函数 ...

  7. web.config文件中配置数据库连接的两种方式

    web.config文件中配置数据库连接的两种方式 标签: 数据库webconfig 2015-04-28 18:18 31590人阅读 评论(1)收藏举报    分类: 数据库(74)  在网站开发 ...

  8. 基础篇：1.JavaScript运行在html中，引用有几种方式？—— 6.js中常用的输出方式？

    书接上文,上文提到若干条JavaScript的基础性知识,大部分都是一些概念性的东西,本着认真严谨的态度,我们要认真对待,有些条目的问题是某个知识点的周边延伸,为节约篇幅,就一起整理了,如有描述不对的 ...

  9. CSS中隐藏内容的3种方法

    CSS中隐藏内容的3种方法 一般有:隐藏文本/图片.隐藏链接.隐藏超出范围的内容.隐藏弹出层.隐藏滚动条.清除错位和浮动等. 1.使用display:none来隐藏所有内容 display:none可 ...

随机推荐

  1. 仿手机QQ消息小红点动画2

    前言 上一篇把动画的实现步骤大致理清,需要确认小尾巴的绘制区域,关键就是确定4个顶点的位置.大家可以根据需要,选择不同的计算方式. 今天,要实现: 文字的添加 尾巴拉长用弧形代替直线 下面是现在的效果 ...

  2. Model验证简单易懂

    public bool UserSex { get; set; } //定义名字 [Display(Name = "年龄")] [Range(0, 150, ErrorMessag ...

  3. Java运算符使用总结（重点：自增自减、位运算和逻辑运算）

    Java运算符共包括这几种:算术运算符.比较运算符.位运算符.逻辑运算符.赋值运算符和其他运算符.(该图来自网络) 简单的运算符,就不过多介绍使用了,可自行测试.关于赋值运算,可以结合算术运算和位运算 ...

  4. C++继承与多态练习--计算图形面积

    1.目的: /*设计一个计算图形面积的类库. 类库的顶层是一个抽象类,并且提供三个纯虚函数:显示数据成员.返回面积和返回体积. Class Shape { virtual void showData( ...

  5. Java 常见BUG 整理

    1.BigDecimal初始化double 2.Integer   java对于-128到127之间的数,会进行缓存,这个范围的Integer对象是同一个! == 是ok,但是超出这个范围就不可以用 ...

  6. 安装mysql时出现initialize specified but the data directory has files in in.Aborting.该如何解决

    eclipse中写入sql插入语句时,navicat中显示的出现乱码(???). 在修改eclipse工作空间编码.navicate中的数据库编码.mysql中my.ini中的配置之后还是出现乱码. ...

  7. 一次JVM内存调优过程

    项目中,有个同事写的JOB,使用到查询数据库大量历史协议数据(大概300W左右),由于对存放数据的list或map没有做“用完即时声明释放”. 导致此Jar部署在windows service后,进程 ...

  8. vue-scroller使用

    <template> <div class="page page-scroller"> <scroller class="scroller& ...

  9. phporjquery生成二维码

    一.php生成二维码 下载文章末尾链接中phpcode文件 include "./phpqrcode/qrlib.php"; //QRcode::png('http://www.b ...

  10. laravel artisan 命令列表

    5.4版本新增 命令 说明 备注 php artisan make:resource ? 创建api返回格式化资源 >=5.4版本可用 php artisan make:rule ? 创建val ...