今天碰见一个问题,怎么让长度可变的盒子居中,瞬间还有点懵逼了,但想了想,也算实现了。记录下来,大神勿喷
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.pox{
display:inline-block;
background-color:red;
height:30px;
}
.box{
background-color:green;
text-align:center;
}
</style>
</head>
<body>
<div class="box">
<div class="pox">我是pox,大小可变</div>
</div>
</body>
</html>
这个呢,思路是让 pox 这个盒子设置成inline-block 这样他就具有块级属性和内联元素的属性,然后让外面的 text-algin:center 居中,这样一来就相当于操作内联元素了,我们只需在操作box 就可以了
第二个`
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
ul:after{
content: '\u0020';
display: block;
visibility: hidden;
height: 0;
clear: both;
}
li{
float:left;
width:100px;
height:50px;
border:1px solid red;
}
.pox{
display:table;
background:green;
margin:0 auto;
}
.box{
background:blue;
height:100px;
}
</style>
</head>
<body>
<div class="box">
<div class="pox">
<ul>
<li>123</li>
<li>adf</li>
<li>lkj</li>
<li>asf</li>
<li>tbf</li>
</ul>
</div>
</div>
</body>
</html>
这种情况 用第一种有时候就会不管用,暂时没研究,以后看看,但是可以将pox 设置 display:table; margin:0 auto; 就可以了
然后在操作box就好了