html - CSS - 在页面上居中文本并左对齐

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:汽车; margin-right: auto; 事情已经解决了，所以已经完成了。

此外，旁注:我将您的字体大小从像素更改为 ems 只是因为我认为 ems 在不同系统上工作得更好。