在标题上,您可以使用 flexbox 使段落居中(水平和垂直),并使用 flex-direction 将每个同级放在一行上。这样,该段落就占据了 100% 的屏幕宽度,尽管它是同级(图像)。否则,您可以使用定位或浮动,这会将元素从 dom 流中取出。
body {
background-color: grey;
margin: 0;
padding: 0 1em;
}
header {
background-image: url('header.jpg');
background-size: cover;
background-position: center;
margin: 0;
padding: 0;
min-height: 10vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
#logo {
align-self: start;
margin: 0;
padding: 0.5em 0 0.6em;
}
#page-description {
color: white;
padding: 1em;
font-size: 30px;
margin: 0 auto;
text-align: center;
background-color: #707070;
box-sizing: border-box;
width: 100%;
}
<header>
<img src="https://www.playourgames.nl/35770-medium_default/controller-wireless-xbox-pulse-red.jpg" alt="Xboxpulse" id="logo">
<p id="page-description">News</p>
</header>