Question

我在段落标记上设置margin-left/right:300px;以将包含标题的背景颜色的边缘推送到文本本身。

当我缩小屏幕时，段落的背景颜色最终消失，并且单词逐渐移动到屏幕的最右侧，直到单词不再存在。

是否有更好的方法来调整背景颜色，以便不占用整个分配的标题空间？

#educationhead p {
    color: orangered;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    background: rgba(54, 25, 25, .75);
    margin-left:300px;
    margin-right:300px;
}

<header id="educationhead" class="section-header">
    <h2 class="section-title"><span>Education</span></h2>
    <div class="spacer"></div>
    <p id="edupara1" class="section-subtitle">Bla Bla Bla Text</p>
</header>

Answer 1

在display: table;上使用margin: 0 auto和p，您可以将其置于中心位置。其他方法包括在父级上设置text-align: center;或为p提供特定宽度并执行margin: 0 auto;。

#educationhead p {
    color: orangered;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    background: rgba(54, 25, 25, .75);
    display: table;
    width: auto;
    margin: 0 auto;
}

<header id="educationhead" class="section-header">
    <h2 class="section-title"><span>Education</span></h2>
    <div class="spacer"></div>
    <p id="edupara1" class="section-subtitle">Bla Bla Bla Text</p>
</header>

受段落标记边距影响的移动视图

1 个答案: