在标题中对齐段落文本

Posted 2021-05-02

我正在编写我的第一个网站，但我无法调整介绍文本。现在该段落与左侧对齐，这很好，但我想让文本框只有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和段块元素将自动采用最大宽度625px。

另一答案

 header.masthead .intro-text p {
    padding-top: 50px;
    padding-bottom: 100px;
    padding-right: 500;

    width: 625px;
  }

为你的元素添加一个宽度。