如果我不提前知道宽度是多少，我该如何居中？答案

【问题标题】：How can I center something if I don't know ahead of time what the width is?如果我不提前知道宽度是多少，我该如何居中？
【发布时间】：2010-11-01 02:51:45
【问题描述】：

我试图在 div 中将包含一些文本的段落标签居中，但我似乎无法使用 margin: 0 auto 将其居中，而无需为段落指定固定宽度。我不想指定一个固定的宽度，因为我会在段落标签中输入动态文本，并且它总是会根据文本的多少而具有不同的宽度。

有谁知道如何在 div 中将段落标签居中而无需为段落指定固定宽度或不使用表格？

【问题讨论】：

标签： html css margin center

【解决方案1】：

使用内联 CSS 试试这个：

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

或者只使用 HTML

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

【讨论】：

与外部样式表相比，内联 CSS 是不好的做法，与使用 CSS 相比，使用 align 属性是不好的做法。

【解决方案2】：

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

【讨论】：

【解决方案3】：

这是使用样式表的方法。

样式表：

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>

【讨论】：

你能解释一下为什么我们需要第二条 CSS 规则吗？
我的大部分习惯是在我不再需要它时立即删除文本的中心对齐。在这种情况下，它将不起作用。
自动边距可能有助于在某些浏览器中对齐，这只是我出于习惯而做的事情，不记得确切的原因。
啊……现在，我明白了。如果没有该规则，“p”会从它周围的“div”继承“text-align: center”（因此段落内部的文本也会居中）。
是的，完全正确。我忘了把它切换回足够多的时间来默认执行它。

【解决方案4】：

除了“文本对齐”属性

用于在块元素（如 div）中居中元素

像使用 css 一样

边距：自动

类似于下面发布的内容

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

你可以使用

“文本对齐：中心” “垂直对齐：中间”

【讨论】：

【解决方案5】：

如果 div 设置了宽度，你只需要

.myDiv { 文本对齐：中心； }

也听听 garry 的评论。在任何情况下都不要使用内联 CSS。

如果你在 div 中有其他东西要居中，这也是另一个肮脏的修复：

你总是可以的：

$('.youParagraph 或 .otherContent').wrap('');

如果您在一个大型团队中工作并且关注点分离是一个问题，那么显然不要这样做。

我希望这会有所帮助。

【讨论】：

【解决方案6】：

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

将扩展到整个可用宽度。

如果你不支持 IE

否则，如果您的元素被块级元素包围，您可以执行 p { display: inline-block; } p { 显示：内联； } html > /**/ body p { display: inline-block; } （最后两条规则适用于 IE 并为健全的浏览器重置 IE 修复）之后，应用 { text-align: center; } 在容器上。

正如有人已经提到的，请参阅http://haslayout.net/css-tuts/Horizontal-Centering 了解更多信息。

干杯！ Zoffix Znet

【讨论】：

【解决方案7】：

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

.innerElement {margin:0 auto}

鉴于它们都是没有浮动参数的块级元素，它应该很好用！

【讨论】：

【解决方案8】：

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

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

【讨论】：