Question

很容易将边距为0的长文本居中，并用边距或填充控制距离。

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

以短文为中心
text alignt left
我不知道宽度

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属性。

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

2 个答案: