有关text-align:center为什么有的第一行就居中,有的第二行开始才居中?

陈落
  • 42

在块级元素中第一行就居中,在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>

clipboard.png

回复
阅读 1k
2 个回答
✓ 已被采纳

这里你要区分inline-block和block.
inline-block如果只有一行的话,内容多宽它有多宽。所以居中是看不出的,而有两行的话,很显然必然是一行放不下,第二行才能看出居中。

另外这里CSS,box的margin 0 auto其实是无效的,因为第一个box自然铺满水平方向,第二个box不受此属性值影响。

是全部居中,
你的第二张图, 第一行也是居中的状态, 只是长度充满了父级

你知道吗?

宣传栏