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. activeMQ的高级特性：嵌入activemq

    activemq的高级特性之嵌入式activemq 1:编写activeMQ服务 import org.apache.activemq.broker.BrokerService; import org ...

  2. Linux下Tomcat性能优化--文件句柄数增大

    今天在对项目进行性能压力测试时,设置并发量为1000,发现Tomcat控制报错: java.IOException:打开的文件过多 经搜索,发现是由于Linux默认设置的句柄数为1024,当并发量过大 ...

  3. vue-cli 项目安装失败 tunneling socket could not be established, cause=connect ECONNREFUSED

    1.安装vue-cli npm install vue-cli -g 2.初始化项目 vue init webpack project 此时报错:vue-cli · Failed to downloa ...

  4. Shell学习积累//持续更新

    1.until的使用 直到判断条件满足,否则会一直执行,与while使用相反 until [ $command -eq 200 ] do command=`curl -o /dev/null -s - ...

  5. 郁金香指标开源库的使用--（tulipindicators-0.8.4）

    瞎逛发现最新出了这么一个指标库,有100多种指标的函数库,文档写的比较好,重要的是作者一直在维护. 把它编成库,然后测试一下,可用于自动交易,策略交易等开发. 1.下载地址 https://githu ...

  6. 验证码生成工具——Jcaptcha

    <dependency> <groupId>com.octo.captcha</groupId> <artifactId>jcaptcha</ar ...

  7. 20155216 2016-2017-2 《Java程序设计》第二周学习总结

    教材学习内容总结 类型 short占2字节 int占4字节 long占8字节 byte占1字节,可表示-128~127的整数 char占2字节 boolean不考虑占字节 float占4字节 doub ...

  8. 20155218 2016-2017-2 《Java程序设计》第9周学习总结

    20155218 2016-2017-2 <Java程序设计>第9周学习总结 教材学习内容总结 JDBC全名Java DataBase Connectivity,是java联机数据库的标准 ...

  9. 20155235 《Java程序设计》 实验二 Java面向对象程序设计

    20155235 <Java程序设计> 实验二 Java面向对象程序设计 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L ...

  10. 20155305乔磊2016-2017-2《Java程序设计》第一周学习总结

    学习考核方式后感 老师对于成绩的获得有很多细节的地方,获得高分很不容易,考核次数也很多,100分分为课堂考核,实验,团队项目,老师对我们的要求可以说非常的严格,我也为有一个要求严格的老师感到幸运荣幸. ...