Question

致力于设计网站，并且在将文本置于页面中心时遇到问题，同时保持其合理性。我尝试应用此效果的部分是h3。我错过了一些显而易见的东西，但我感到很茫然。谢谢！

以下是我的代码：

HTML

<section id="marketing" class="section fp-section" data-anchor="thirdPage">
    <img id="marketingLogo" src="images/marketing.png">
    <h2 align="center"> Text goes here</h2>
    <h3 align="center"> Text goes here</h3>

CSS

.fp-section h3{
    font-size: 20px;
    margin-right: auto;
    margin-left: auto;
    text-align: left;
}

Answer 1

首先，从html中删除align: center，首先，最好将html和css分开，然后再将其分开，因为你不需要它。

其次，你需要将css设置为：

.fp-section h3{
    width: 10em;
    font-size: 1.25em;
    margin-left: auto;
    margin-right: auto;
    text-align: justify;
}

这是有效的，因为你已经给它一个明确的宽度，因此，当线条太长或类似的东西它会包裹并仍然在中心时，你已经拥有margin-left: auto; margin-right: auto;事情已经弄明白了，所以已经完成了。

此外，旁注：我将字体大小从像素更改为ems只是因为我认为ems在不同系统中的效果更好。

Answer 2

您可能只需要在标题中添加display: block;或display: inline-block;。

编辑：虽然这样说，但你所提出的问题似乎是相互矛盾的。如果你想让它居中但是左对齐，你会怎么看到它被显示？

Answer 3

看起来你的元素上的内联样式（align =“center”）优先于样式表。

来源：https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

CSS - 页面中心文本左对齐

3 个答案: