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

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

阅读 3.2k
2 个回答

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题