在块级元素中第一行就居中,在inline-block里第二行才开始居中
<style>
.box {
width: 280px;
height: 120px;
background-color: #f0f3f9;
margin:0 auto;
}
.block {
display:block;
text-align: center;
}
.inline-block{
display: inline-block;
text-align: center;
}
</style>
</head>
<body>
<div class="box">
<div class="block">我第一行就居中了</div>
</div>
<br>
<div class="box">
<div class="inline-block">我第一行没居中,但是我第二行居中了你看</div>
</div>
这里你要区分inline-block和block.
inline-block如果只有一行的话,内容多宽它有多宽。所以居中是看不出的,而有两行的话,很显然必然是一行放不下,第二行才能看出居中。
另外这里CSS,box的margin 0 auto其实是无效的,因为第一个box自然铺满水平方向,第二个box不受此属性值影响。