html - 将具有多行文本的 block 居中

Question

这是我正在使用的示例:

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 始终必须灵活并适应多行文本。任何解决方案/示例将不胜感激，谢谢。

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

Answer 1

我要补充:

text-align: center

或

text-align:justify

代替:

text-align:left

这是你期望的样子吗？