在标题中对齐段落文本

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在标题中对齐段落文本相关的知识,希望对你有一定的参考价值。

我正在编写我的第一个网站,但我无法调整介绍文本。现在该段落与左侧对齐,这很好,但我想让文本框只有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;
  }

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

以上是关于在标题中对齐段落文本的主要内容,如果未能解决你的问题,请参考以下文章

如何垂直对齐段落中心

dotnet OpenXML 聊聊文本段落对齐方式

段落排版--对齐(text-aliagn)

敲敲黑板 | 文字垂直方向对齐这样设置!

css 中心对齐段落文本

iText 7 - 居中对齐文字和段落