Text-align:center的失效
1.我之前一直以为text-align的水平居中是万能的，直达有一次复习终于明白了道理。下面看代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box1{
width:500px;
height:500px;
background: url(image/1.jpg);
text-align: center;
}
.box2{
/* display: inline-block; 必须加入这句话text-align才会生效 */
width:200px;
height: 200px;
background-color: #0000FF;
}
</style>
</head>
<body>
<div id="box1">
<div class="box2"></div>
</div>
</body>
</html>
父盒子box1和子盒子box2，我之前的理解是只要在父盒子里加入text-align:center就可以实现子盒子的水平居中，后才查阅才知道，text-align想对块状元素生效生效必须将其转化为行内块元素，因为div是块状元素，所以直接在父盒子box1中写入text-align:center是不生效的，必须对子元素进行display变换，display:line-block这句话在子盒子box2中一定要写，这句话的意思就是将子盒子box2转为行内块元素。这样子盒子在父盒子中就能水平居中了。
如果以后发现其他的细节会继续补充。
120
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
