使用 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>
最佳答案
如果您允许自己执行以下操作,您可以轻松地做到这一点:
<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 文档中的术语!),这通常使您的宽度小于父容器的宽度,然后允许居中工作。
关于html - 将左对齐的短文本 block 居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16189696/