将左对齐的短文本块居中

Question

很容易将边距为 0 的长文本自动居中，并通过边距或内边距控制距离。

但是，是否可以在不知道宽度的情况下将文本居中以及该文本是否左对齐？

• 将短文本居中
• 文本左对齐
• 我不知道宽度

这是要检查的示例：http://jsfiddle.net/j4Y3k/5/

CSS：

#long {
    margin:50px auto;
    text-align:left;
    padding: 0px 100px;
    background:white;
}

#short {
    margin:0px auto;
    text-align:left;
}

HTML：

<div id="long">
long, long,long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, long, 
</div>

<div id="short"> 
short, short, short<br>
short, short, short, short, short, short<br>
short, short
</div>

Answer 1

如果您允许自己执行以下操作，您可以轻松做到这一点：

<div class="wrap">
    <div id="short">short, short, short
        <br>short, short, short, short, short, short
        <br>short, short</div>
</div>

并应用以下 CSS：

.wrap {
    text-align: center;
}
#short {
    margin:0px;
    auto;
    text-align:left;
    outline: 1px dotted blue;
    display: inline-block;
}

见小提琴：http://jsfiddle.net/audetwebdesign/GywRR/

inline-block 将收缩包装您的内容，并且仍然响应为父容器声明的 text-align: center 属性。

为什么是内联块与块

block 将使用最大可用宽度，通常是父容器的宽度。 inline-block 将缩小以适应（w3.org 文档中的术语！），这通常会为您提供小于父容器宽度的宽度，从而允许居中工作。

Answer 2

使用“margin auto”居中时，您需要设置width。此外，您的 margin 属性中存在语法错误；

#short {
    margin:50px auto;
    text-align:left;
    width:300px;
}

http://jsfiddle.net/j4Y3k/2/

您可能认为您已将长元素居中，但这只是因为它的空间不足，而100px 填充迫使两侧的间隙。如果您希望真正居中，您还需要在此设置 width 属性。