顶部横幅字词叠加对齐问题

Question

我正在尝试创建一种顶部横幅，在具有透明边框背景的图像背景上带有文字，但不幸的是，我似乎无法正确对齐。它一直倾斜到页面的右端。有什么想法吗？

这是我的代码示例，正如您将看到的，我试图重置 bor 类的边距，认为这可能会有所帮助，但它并没有真正做任何事情。我还尝试重置代码其他部分的边距，但没有任何效果。也许是定位，但我似乎无法让它工作。

CSS
.full{
min-height: 100%;
background-color: white;
/*background-image: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.3) 90%), url("america/cservice.jpeg");*/
/*background-blend-mode: lighten;*/
padding-top:25px ;
color: #5a5a5a;
/*color: black;*/
padding-bottom: 20px;
text-align: center;
align-items: center;
border-top: 5px solid rgba(0, 0, 102, 0.5);
border-bottom: 5px solid rgba(0, 0, 102, 0.5);
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
.image{
width: 100%;
height: 280px;
background-image: url(america/news2.png);
background-size: cover;
background-repeat: no-repeat;
position: relative;
padding-top: 20px;
padding-bottom: 20px;
}
.bor {
position: absolute;
border: 5px solid;
border-color: rgba(255, 255, 255, 0.5);
padding-top:;
padding-bottom:;
background-color: rgba(133, 133, 173, 0.4);
margin-left: 0px;
margin-right: ;
}
h2 {
position: absolute;
width: 100%;
color: black;
font-size: 40px;
padding-top: 85px;
}
h4 {
position: relative;
width: 100%;
color: white;
font-size: 30px;
padding-top: 155px;
font-stretch: ultra-expanded;
}
b{
border: 5px solid black;
padding-right: 25px;
padding-left: 25px;
margin-left: 20px;
margin-right: 20px;
color: white;
font-weight: 900;
font-size: 40px;
}

HTML
<div class="full">
<div id="section">
<h1 class="text-center">&mdash;News Feed&mdash;</h1>
<br>
<hr>
<div class="image">
<center><span class="bor">
<h2>Weekly<b>Report</b></h2>
<br>
<h4>Catch up on all the latest news regarding the world</h4>   
</span></center>
</div>
</div>
</div>

Answer 1

这是一个工作示例：

.full{
min-height: 100%;
background-color: white;
/*background-image: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.3) 90%), url("america/cservice.jpeg");*/
/*background-blend-mode: lighten;*/
padding-top:25px ;
color: #5a5a5a;
/*color: black;*/
padding-bottom: 20px;
text-align: center;
align-items: center;
border-top: 5px solid rgba(0, 0, 102, 0.5);
border-bottom: 5px solid rgba(0, 0, 102, 0.5);
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
}
.image{
width: 100%;
height: 280px;
background-image: url(america/news2.png);
background-size: cover;
background-repeat: no-repeat;
position: relative;
padding-top: 20px;
padding-bottom: 20px;
display: block;
margin: 0 auto;
}
.bor {
position: absolute;
border: 5px solid;
border-color: rgba(255, 255, 255, 0.5);
padding-top:;
padding-bottom:;
background-color: rgba(133, 133, 173, 0.4);
left: 0;
right: 0;
}
h2 {
position: absolute;
width: 100%;
color: black;
font-size: 40px;
padding-top: 85px;
}
h4 {
position: relative;
width: 100%;
color: white;
font-size: 30px;
padding-top: 155px;
font-stretch: ultra-expanded;
}
b{
border: 5px solid black;
padding-right: 25px;
padding-left: 25px;
margin-left: 20px;
margin-right: 20px;
color: white;
font-weight: 900;
font-size: 40px;
}

<div class="full">
<div id="section">
<h1 class="text-center">&mdash;News Feed&mdash;</h1>
<br>
<hr>
<div class="image">
<center><span class="bor">
<h2>Weekly<b>Report</b></h2>
<br>
<h4>Catch up on all the latest news regarding the world</h4>   
</span></center>
</div>
</div>
</div>

你遇到了这个问题，因为你的.bor类有一个绝对的位置。这意味着您必须使用top、bottom、left或right属性指定其父级中的位置。

希望这有帮助！