将左侧对齐的短文本块居中

Question

使用边距0自动将长文本居中并轻松控制与边距或填充的距离.

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

• 以短文为中心
• 文字alignt离开了
• 我不知道宽度

以下是检查的示例: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文档中的术语!),这通常会使您的宽度小于父容器的宽度,从而允许居中工作.