这是我正在使用的示例:
http://jsfiddle.net/adyjzbuh/18/
代码如下:
<div class="box1">
<div class="box2">Some text</div>
</div>
<div class="box1">
<div class="box2">Some more text, actually, 2 lines of textalicious text</div>
</div>
<div class="box1">
<div class="box3">Some more text, actually, 2 lines of textalicious text</div>
</div>
<div class="box1">
<div class="box4">Some more text, actually, 2 lines of textalicious text</div>
</div>
这是 CSS:
.box1 {
width: 300px;
border: 1px solid black;
padding: 10px;
text-align: center;
}
.box2 {
display: table;
margin: 0px auto;
border: 1px solid black;
padding: 10px;
text-align: left;
}
.box3 {
display: inline-block;
margin: 0px auto;
border: 1px solid black;
padding: 10px;
text-align: left;
}
.box4 {
display: table-cell;
margin: 0px auto;
border: 1px solid black;
padding: 10px;
text-align: left;
}
如您所见,第一个 block 完全符合我的要求。边距自动调整, block 按预期居中。当有多行文本时,问题就来了。当我对包含多行文本的下一个 block 使用相同的样式时,该 block 会将宽度调整为可用空间的 100%,从而在第一行留下很大的空隙,并且 block 不会显示在中心位置。
我尝试将显示更改为内联 block 和表格单元格,但它不起作用(如第三和第四 block 所示)。我到处搜索解决方案,但没有一个奏效。
外部容器始终为 300px,内部 block 始终必须灵活并适应多行文本。任何解决方案/示例将不胜感激,谢谢。
编辑 我忘了提到客户特别希望文本左对齐。
最佳答案
我要补充:
text-align: center
或
text-align:justify
代替:
text-align:left
这是你期望的样子吗?
关于html - 将具有多行文本的 block 居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30879858/