Question

以下是我正在使用的示例：

以下是代码：

<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;
}

正如您所看到的，第一个块完全符合我的要求。边距自动调整，块按预期居中。当存在多行文本时会出现问题。当我对具有多行文本的下一个块使用相同的样式时，该块将宽度调整为可用空间的100％，在第一行上留下很大的间隙并且不会出现居中。

我尝试将显示更改为内联块和表格单元格，但它不起作用（如第三和第四块所示）。我到处寻找解决方案，没有一个有效。

外部容器将始终为300px，内部块必须始终具有灵活性并适应多行文本。非常感谢任何解决方案/示例，谢谢。

编辑我忘了提到客户特别希望文字对齐到左边。

Answer 1

我想补充一下：


text-align: center

或


text-align:justify

而不是：


text-align:left

这是你期望的样子吗？

Answer 2

你可能想要最大宽度：50％;在你的内盒上。原因是你的解决方案并没有真正按照你想要的方式工作，你的边距设置为自动，因此边距是根据宽度计算的。因此，如果说您的宽度将是父容器的50％（在这种情况下为.box1），则会自动计算边距以填充其他50％，每边25％。

最大宽度可以解决您的问题，内箱仍然灵活，但只占宽度的50％。

.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;
    max-width: 50%;
}

Answer 3

不确定你最终要找的是but here is a working example，使用表方法，就像你一样，但是使用

display:table;
display:table-cell;

相应地，文本在中间对齐，并且居中或左对齐。

将具有多行文本的块居中

3 个答案: