Question

我在各个地方阅读text-align: center仅适用于文字和inline元素。它适用于我的标题元素，但不适用于我的ul和blockquote元素。我必须为display: inline-block添加ul才能居中。

我知道它适用于标题，因为虽然它们整个元素都是一个块，但它们包含内联文本。但是，与ul和blockquote元素有什么不同呢？他们是否也是包含文本的块级元素，这是真的吗？

有关其他参考，请参阅我的CodePen。

Answer 1

当您想要将父块级元素中包含的内联（或内联块）元素居中时，

text-align可以正常工作。您将样式应用于父元素。

由于ul元素不是内联元素，因此当您将text-align: center应用于父元素时，它们不会居中。它们是块级元素，块级元素默认占用该行的剩余空间。

要使块级元素居中，您可以为其指定特定宽度，然后可以将margin-left: auto和margin-right: auto应用于元素。因此，在您的情况下，如果您为<ul>元素指定宽度并将margin-left和margin-right设置为auto，则它将在其父div中居中。无需text-align: center。

默认情况下，<ul>不包含文字，但<li>不包含文字。因此，您可以将text-align: center应用于<li>元素，以将内嵌文本居中置于其中。

此外，您的<blockquote>元素只能直接包含块级元素：<p>和<footer>。它们不包含作为直接子后代的文本。因此，没有任何东西会集中在它内部。如果你只有文本，那么文本将居中。

<强>更新

根据你对居中和左对齐的评论，如果我正确理解你，你可以这样做：

<style>
#parent {text-align: center}
#parent ul {display: inline-block; text-align: left}
</style>
<div id="parent">
    <ul>
        <li>....</li>
        <li>....</li>
        <li>....</li>
    </ul>
</div>

这里的技巧是你需要覆盖ul中的text-align = center，否则它会从父div继承。

Answer 2

尝试将div包装在div中，给div一个id，使用id设置样式div，使用＆＃39; text-align：center;＆＃39;

摆脱你拥有的ul CSS样式。

为什么没有文本对齐：如果它包含文本，则在ul上工作

2 个答案: