Question

我试图在div中将段落标记与其中的一些文本居中，但我似乎无法使用margin：0 auto来居中，而无需为段落指定固定宽度。我不想指定一个固定的宽度，因为我将在段落标记中包含动态文本，并且根据文本的大小，它将始终是不同的宽度。

有没有人知道如何将段落标记置于div中，而无需为段落指定固定宽度或不使用表格？

Answer 1

以下是使用样式表的方法。

样式表：

div.center-content
{
    text-align: center;
}

div.center-content p
{
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}

HTML：

<div class="center-content">
    <p>Lorem ipsum dolor sit amet</p>
</div>

Answer 2

找到了这个：Centering Block-level Content With Unknown Width。

Answer 3

除了“text-align”属性

用于居中块元素内的元素，如div

使用css，如


 margin:auto

类似于下面发布的内容

当垂直居中时，最好使用表格（这在大多数情况下是唯一的跨浏览器兼容解决方案）

你可以使用

 "text-align:center"  

 "vertical-align:middle"

Answer 4

我认为最好的方法是在块级元素中包含元素并执行：

.innerElement {margin:0 auto}

鉴于它们都是没有float参数的块级元素，它应该工作得很好！

Answer 5

这是centering a div with no width的一个很好的解决方法。

是无表格的，可以在任何浏览器中使用！

Answer 6

使用内联CSS尝试此操作：

<p style="text-align: center;">Lorem ipsum dolor sit amet</p>

或仅使用HTML

<p align="center">Lorem ipsum dolor sit amet</p>

Answer 7

如果div设置了所需的全部宽度

.myDiv {text-align：center; }

还听听Garry的评论。在任何情况下都不要使用内联css。

另外另一个脏修复，以防你在div中心有其他东西：

你可以随时：

$（'。youParagraph或.otherContent'）。wrap（''）;

如果你在一个大型团队中工作并且关注点分离是个问题，显然不要练习这个。

我希望这会有所帮助。

Answer 8

呃，自动边距需要设置宽度，因为默认情况下块级元素，例如

会扩展到整个可用宽度。

如果您不支持IE＆lt; 8你可以设置{display：table;保证金：0自动; }

否则，如果你的元素被块级元素包围，你可以做p {display：inline-block; } p {display：inline; } html＆gt; / ** / body p {display：inline-block; （最后两条规则适用于IE并为理智的浏览器重置IE修复）之后，应用{text-align：center;在容器上。

正如有人提到的那样，请参阅http://haslayout.net/css-tuts/Horizontal-Centering以获取更多信息。

干杯！ Zoffix Znet

如果我事先不知道宽度是多少，我怎么能把东西放在中心？

8 个答案: