html - 对齐标题中的段落文本

标签 html css responsive-design

我正在编写我的第一个网站,但在对齐介绍文字时遇到了问题。现在段落左对齐,这很好,但我试图让文本框的宽度仅为 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/

相关文章:

html - 使 flex-box 中 child 的高度相同

css - 根据页面调整大小和可用空间动态调整 Div 标签中的文本大小

html - 带有响应图像的背景叠加

javascript - 在单页应用程序中选择菜单时调用 Controller - angularJs

html - 如何将输入栏中的箭头向右移动?

html - 带 nowrap 的 Div 仍然换行

html - 非 JSF 组件的条件渲染(普通 HTML 和模板文本)

javascript - css 或 javascript 添加一个 :hover style to complete line?

css - netbeans 8.2 css 网格警告和错误

CSS 响应式 div,当高度以像素为单位设置时