html+css--水平居中总结（不定宽块状元素方法）（一）
来源：http://www.imooc.com/code/6363
在实际工作中我们会遇到需要为“不定宽度的块状元素”设置居中，比如网页上的分页导航，因为分页的数量是不确定的，所以我们不能通过设置宽度来限制它的弹性。(不定宽块状元素：块状元素的宽度width不固定。)
不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）：
- 加入 table 标签
- 设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置
- 设置 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--水平居中总结（不定宽块状元素方法）（一）的更多相关文章
- html+css--水平居中总结-不定宽块状元素方法（三）
来源:http://www.imooc.com/code/6365 除了前两节讲到的插入table标签,以及改变元素的display类型,可以使不定宽块状元素水平居中之外,本节介绍第3种实现这种效果的 ...
- CSS中不定宽块状元素的水平居中显示
CSS中不定宽块状元素的水平居中显示 慕课网上的HTML/CSS教程 http://www.imooc.com/view/9 其中有三种方法 第一种是加入table标签 任务是实现div元素的水平居中 ...
- html+css-水平居中-不定款块状元素方法（二）
来源:http://www.imooc.com/code/6364 除了上一节讲到的插入table标签,可以使不定宽块状元素水平居中之外,本节介绍第2种实现这种效果的方法,改变元素的display类型 ...
- html+CSS--水平居中设置（定宽块状元素）
来源:http://www.imooc.com/code/4336 当被设置元素为 块状元素 时用 text-align:center 就不起作用了,这时也分两种情况:定宽块状元素和不定宽块状元素. ...
- css实现div不定宽高垂直水平居中解决方案
在项目中我们经常能碰见然图片垂直水平居中,不定宽高的div垂直水平居中,等等~~ 现在我将介绍我所知道的几种用css来解决的几种方案. 1.父元素text-align:center;display:t ...
- CSS 技巧一则 -- 不定宽溢出文本适配滚动
在日常布局当中,肯定经常会遇到文本内容超过容器的情况.非常常见的一种解决方案是超出省略. 但是,有的时候,由于场景的限制,可能会出现在一些无法使用超出打点省略的方法的场景,譬如在导航栏中: 这种情况下 ...
- 定宽块状元素居中 1记（text-align/margin:0 auto）
对于text-align:center的用法只是针对文本相对于父元素的居中,例如: #jz2{ width:300px; margin: 10px auto; border:2px solid red ...
- CSS之文本溢出隐藏，不定宽高元素垂直水平居中、禁止页面文本复制
1.如何让不固定元素宽高的元素垂直水平居中 .center { position: absolute; top: 50%; left: 50%; background-color: #000; wid ...
- css/css3实现未知宽高元素的垂直居中和水平居中
题目:.a{ width: 200px; height: 200px; background-color: #ccc;} <body> <div class="a" ...
随机推荐
- 个人分享：平时开发中感觉几款不错 IDE 、插件、工具
本人主业 C# 开发,由于是做 Web 开发,所以像 SQL.JavaScript 这些肯定经常要接触到.当然,平时本人也写过 Node.js.Java.Python之类,不过,这些只能讲简单了解而已 ...
- 图片原理解说（综合版：JPEG,PNG,BMP,GIF）
JPEG: 首先说明 jpeg图片:JPEG是joint Photographic Experts Group(联合图像专家组)的缩写,文件后辍名为"．jpg"或"．jp ...
- C++学习笔记之this指针
为了说明这个问题,首先来建立一个简单的类 #include <iostream> #include <string> using namespace std; class Bo ...
- Codeforces Round #307 (Div. 2) E. GukiZ and GukiZiana 分块
E. GukiZ and GukiZiana Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/55 ...
- C# 仿制QQ弹出新闻消息框
打开QQ的时候,QQ新闻弹出窗体在屏幕的右下角就会慢慢升起一个小窗口,占用的地方不大,可以起到提示的作用.下面就让我们来看看,怎样用系统API来轻松实现这个功能. API原型函数: bool Anim ...
- OpenGL 4.0 GLSL 实现 投影纹理映射（Projective Texture Mapping） (转)
http://blog.csdn.net/zhuyingqingfen/article/details/19331721 分类: GLSL 投影纹理映射 (projective texture ...
- [Unity3D]Unity3D游戏开发之使用EasyTouch虚拟摇杆控制人物移动
大家好,欢迎大家关注我的博客,我是秦元培,我的博客地址是blog.csdn.net/qinyuanpei.今天呢,我们来一起学习在Unity3D中使用EasyTouch虚拟摇杆来控制人物移动.虽然Un ...
- nicehair
https://github.com/lanyj189/nicehair https://github.com/eltld/nicehair https://github.com/pepoc/Cust ...
- android-square-progressbar-legacy
https://github.com/eltld/android-square-progressbar-legacy
- TP第2个项目总结
1.参数尼玛传接受要非数字方法 $id = $this->_get('id','intval',0); $field_wc = $this->_get('wc_field'); 2.参数不 ...