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

时间:2017-10-05 15:37:00

标签: html css

我在段落标记上设置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>

1 个答案:

答案 0 :(得分:1)

display: table;上使用margin: 0 autop,您可以将其置于中心位置。其他方法包括在父级上设置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>