3

使用边距 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>
4

2 回答 2

5

如果您允许自己执行以下操作，则可以轻松完成：

<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's 将使用最大可用宽度，通常是父容器的宽度。 inline-block将缩小以适应（w3.org 文档中的术语！），这通常给你一个小于父容器的宽度，然后允许居中工作。

于 2013-04-24T11:07:17.533 回答
1

您需要width在使用“margin auto”居中时设置一个。您的margin财产也有语法错误；

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

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

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

于 2013-04-24T10:36:36.557 回答