我正在编写我的第一个网站,但在对齐介绍文字时遇到了问题。现在段落左对齐,这很好,但我试图让文本框的宽度仅为 625px,现在它跨越了页面的整个宽度。我尝试使用填充来解决它,但文本只是保持页面的相同宽度。以下是我当前的代码,任何帮助都会很棒!
HTML:
<header class="masthead">
<div class="container">
<div class="intro-text">
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum. </p>
</div>
</div>
</header>
CSS:
header.masthead {
text-align: left;
color: white;
background-image: url("../img/headshot.png");
background-repeat: no-repeat;
background-attachment: scroll;
background-position: right;
background-size: 500px 601px
}
header.masthead .intro-text p {
padding-top: 50px;
padding-bottom: 100px;
padding-right: 500;
}
最佳答案
是否要在页面中间对齐 625px 的 div?如果是这样,请执行以下操作:
.masthead .container {
margin: 0 auto; // center the div
max-width: 625px;
}
现在您的子 div 和段落 block 元素将自动采用 625px 的最大宽度。
关于html - 对齐标题中的段落文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47985104/