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. Python 基础 函数

    python 什么是函数 Python不但能非常灵活地定义函数,而且本身内置了很多有用的函数,可以直接调用.   python 函数的调用 Python内置了很多有用的函数,我们可以直接调用. 要调用 ...

  2. activemq的高级特性：消息存储持久化

    activemq的高级特性之消息存储持久化 有基于文件的,数据库的,内存的.默认的是基于文件的,在安装目录/data/kahadb.在conf/activemq.xml文件中. <persist ...

  3. SVN(独立安装)-1.9.7 centos 6.5(64位)

    说明: 运行方式: 基于Apache的http.https网页访问形式: 基于svnserve的独立服务器模式. 数据存储方式: 在Berkeley DB数据库中存储数据: 使用普通的文件FSFS存储 ...

  4. 简易高效的Delphi原子队列

    本文提供Delphi一个基于原子操作的无锁队列,简易高效.适用于多线程大吞吐量操作的队列. 可用于Android系统和32,64位Windows系统. 感谢歼10和qsl提供了修改建议! 有如下问题: ...

  5. 大数据学习--day16(集合总体架构--ArrayList--LinkedList)

    集合总体架构--ArrayList--LinkedList Collection接口的实现类用法上都有相似的方法.Map同理. List: 特性 :      1. 有索引     2. 有序     ...

  6. IOT大数据大世界大未来，物联网产业大数据应用简析

    在物联网时代,面对PB级的数据,企业将难以以一己之力完成基础设施的建设.物联网所产生的大量数据不仅会驱动现在的数据中心发生根本性的变化,同时也会驱动相关企业采用新的大数据策略. 物联网的价值在于数据: ...

  7. 蓝牙耳机电路和PCB(网上下载用于练习）

    这个是文件 https://pan.baidu.com/s/1smIyd_aNIt-ON8z8AeWn4Q 密码 w6ju 这是导入进去以后的样子,前面步骤我就跳过了 这是原作者的布局 但是我在看原理 ...

  8. 使用JSTL的taglib做if判断

    背景:使用springmvc做RESTful风格的CRUD时 问题:使用JSTL的taglib做if判断,未能呈现判断后想要的内容 排查过程: 1.先确定了转发到了正确的jsp文件(在jsp页面中增加 ...

  9. 自己写的一些Excel及WordVBA函数[原创]

    1.将Excel当前工作表另存至桌面 Excel中有时一个工作簿中工作表特别多,需要快速单独存取其中一个,可用以下代码快速存至桌面 Sub 另存工作表到桌面() Dim sh As Worksheet ...

  10. 开篇~试试word写博客

    word发布博客设置,mark一下 原帖地址:http://www.cnblogs.com/liuxianan/archive/2013/04/13/3018732.html word代码高亮插件:h ...