来源：http://www.imooc.com/code/6363

在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。(不定宽块状元素：块状元素的宽度width不固定。)

不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：

  1. 加入 table 标签
  2. 设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置
  3. 设置 position:relative 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的

这一小节我们来讲一下第一种方法：

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

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

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

举例：

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>不定宽块状元素水平居中</title>

<style>

table{

    margin:0 auto;

}

/*下面是任务区代码*/

.wrap{

    background:#ccc;

    display:table;    //让第二个div变成table

    margin:0 auto;    //居中显示

}

</style>

</head>

<body>

<div>

<table>

  <tbody>

    <tr><td>

    <ul>

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

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

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

    </ul>

    </td></tr>

  </tbody>

</table>

</div>

<div class="wrap">

  设置我所在的div容器水平居中

</div>

</body>

</html>

上面代码做到的结果是让第二个div元素居中，而不是里面的文本居中。

html+css--水平居中总结（不定宽块状元素方法）（一）的更多相关文章

  1. html+css--水平居中总结-不定宽块状元素方法（三）

    来源:http://www.imooc.com/code/6365 除了前两节讲到的插入table标签,以及改变元素的display类型,可以使不定宽块状元素水平居中之外,本节介绍第3种实现这种效果的 ...

  2. CSS中不定宽块状元素的水平居中显示

    CSS中不定宽块状元素的水平居中显示 慕课网上的HTML/CSS教程 http://www.imooc.com/view/9 其中有三种方法 第一种是加入table标签 任务是实现div元素的水平居中 ...

  3. html+css-水平居中-不定款块状元素方法（二）

    来源:http://www.imooc.com/code/6364 除了上一节讲到的插入table标签,可以使不定宽块状元素水平居中之外,本节介绍第2种实现这种效果的方法,改变元素的display类型 ...

  4. html+CSS--水平居中设置（定宽块状元素）

    来源:http://www.imooc.com/code/4336 当被设置元素为 块状元素 时用 text-align:center 就不起作用了,这时也分两种情况:定宽块状元素和不定宽块状元素. ...

  5. css实现div不定宽高垂直水平居中解决方案

    在项目中我们经常能碰见然图片垂直水平居中,不定宽高的div垂直水平居中,等等~~ 现在我将介绍我所知道的几种用css来解决的几种方案. 1.父元素text-align:center;display:t ...

  6. CSS 技巧一则 -- 不定宽溢出文本适配滚动

    在日常布局当中,肯定经常会遇到文本内容超过容器的情况.非常常见的一种解决方案是超出省略. 但是,有的时候,由于场景的限制,可能会出现在一些无法使用超出打点省略的方法的场景,譬如在导航栏中: 这种情况下 ...

  7. 定宽块状元素居中 1记（text-align/margin:0 auto）

    对于text-align:center的用法只是针对文本相对于父元素的居中,例如: #jz2{ width:300px; margin: 10px auto; border:2px solid red ...

  8. CSS之文本溢出隐藏，不定宽高元素垂直水平居中、禁止页面文本复制

    1.如何让不固定元素宽高的元素垂直水平居中 .center { position: absolute; top: 50%; left: 50%; background-color: #000; wid ...

  9. css/css3实现未知宽高元素的垂直居中和水平居中

    题目:.a{ width: 200px; height: 200px; background-color: #ccc;} <body> <div class="a" ...

随机推荐

  1. [ASP.NET]更简单的方法：FormsAuthentication登录ReturnUrl使用绝对路径

    转自:http://www.cnblogs.com/dudu/p/formsauthentication-returnurl-absoluteuri.html [ASP.NET]更简单的方法:Form ...

  2. 使用Vagrant在Windows下部署开发环境

    做Web开发少不了要在本地搭建好开发环境,虽然说目前各种脚本都有对应的Windows版,甚至是一键安装包,但很多时候和Windows环境的相性并不是那么好,各麻烦的问题是实际部署的环境通常是Linux ...

  3. ps:探索按钮按起落下的技巧

    (从死了一次又一次终于挂掉的百度空间中抢救出来的,发表日期 2014-07-10) 先上图: 那个看上去想按下去的,那个看上去像自然地呢? 显而易见: 第一像按下去的,第二个像自然地. 原因: 渐变: ...

  4. iOS开发-HTTP请求

    什么是URL?URL就是资源的地址.位置,互联网上的每个资源都有一个唯一的URLURL的基本格式: URL中常见的协议 (1)HTTP 超文本传输协议,访问的是远程的网络资源,格式是http:// h ...

  5. IAR EWARM PRINTF/SCANF FORMATTER

    The linker automatically chooses an appropriate formatter for printf- and scanf-related function bas ...

  6. 【M30】代理类

    1.考虑二维数组,在栈上分配,必须在编译时确定大小,也就是大小是常量.另外一点,C++不支持在堆上分配二维数组.怎么解决这个问题? 二维数组可以看成,一维数组的数组.因此,可以使用代理类,Array2 ...

  7. VS 统计代码行数

    使用正则表达式 :    ^:b*[^:b#/]+.*$ 简单说明如下: ^:行头 $:行尾 +:一个或多个 *:0个或多个 :b:表示空白,匹配空格或者制表符 # 表示后面是include,/表示注 ...

  8. Shadow Mapping 的原理与实践（一）

    早在上世纪七十年代末,Williams在他的“Casting Curved Shadows on Curved Surface”一文中提出了名为Shadow Map的阴影生成技术.之后,他人在此基础上 ...

  9. cocos2dx A*算法

    头文件和源文件拷贝到项目中就能用了! have fun 使用cocos2dx 3.2 原理都一样 淡蓝色的点是地图 深蓝色的点是障碍物 绿色的点是路径 暗绿色的点是搜寻过的点 红色的点是按路径行走的点 ...

  10. iOS7与iOS8的比較

    watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGl1c2h1d2VpMDIyNA==/font/5a6L5L2T/fontsize/400/fill/I0 ...