html - 将左对齐的短文本 block 居中

Question

使用 margin 0 自动将长文本居中并使用 margin 或 padding 控制距离很容易。

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

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

这是要检查的示例: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;
}

参见 fiddle :http://jsfiddle.net/audetwebdesign/GywRR/

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

为什么内联 block 与 block

block 将使用最大可用宽度，通常是父容器的宽度。 inline-block 将收缩以适合(w3.org 文档中的术语!)，这通常使您的宽度小于父容器的宽度，然后允许居中工作。