为什么选择方法一加入table标签? 是利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度(table其长度根据其内文本长度决定),因此可以看做一个定宽度块元素,然后再利用定宽度块状居中的margin的方法,使其水平居中。
第一步:为需要设置的居中的元素外面加入一个 table 标签 ( 包括 <tbody>、<tr>、<td> )。
第二步:为这个 table 设置“左右 margin 居中”(这个和定宽块状元素的方法一样)。
注意要选择table标签时,要写display:table;
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<style>
table
{
margin:0 auto;
border:2 px;
color:red;
}
/*下面是任务区代码*/
.wrap{
background:#ccc;
margin:0 auto;
display:table;
}
</style>
</head>
<body>
<div>
<table>
<tbody>
<tr><td>
<ul>
<li>我是第一行文本</li>
<li>我是第二行文本</li>
<li>我是第三行文本</li>
</ul>
</td></tr>
</tbody>
</table>
</div>
<table>
<div class="wrap">
设置我所在的div容器水平居中
</div>
</table>
</body>
</html>
第三种方法:
1. 把父元素浮动到左边,同时向右偏移50%,相当于把父元素的左边缘对齐到整行的中间
2. 把子元素向右偏移50%,这个50%是父元素的50%,即是wrap的50%,而此时wrap的宽度刚好就等于子元素的宽度,也是子元素本身的50%,这样刚好就居中了
比如说代码:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>不定宽块状元素水平居中</title>
<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;}
/*下面是代码任务区*/
.wrap-center{
background:#ccc;
position:relative;
left:-50%;
}
.wrap{
float:left;
left:50%;
position:relative;
}
</style>
</head>
<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>
<!--下面是代码任务区-->
<div class="wrap">
<div class="wrap-center">我们来学习一下这种方法。</div>
</div>
</body>
</html>