**编辑:我已经能够将文本和图像放在 div 的中心，但我希望 div 的背景是全宽的。 我无法使带有背景的 Logo 和全宽 div 和文本与主体中心对齐(响应式)
**编辑 2:这就是我想要实现的目标: enter image description here
我已经尝试将 div 放在 Logo 的 div 中，因为它已经位于中心
片段:
body {
background-image: url('https://source.unsplash.com/random');
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
margin: 0;
}
div.container {
position: absolute;
top: 50%;
left: 50%;
overflow: visible;
}
img.logo {
position: relative;
max-width: 100%;
max-height: 100%;
margin-top: -50%;
margin-left: -50%;
}
#text-container {
background-color: rgba(0, 0, 0, 0.6);
}
#title-text {
text-align: center;
padding: 20px;
color: #f09020;
font-size: 1.5em;
font-weight: 600;
font-family: 'Source Sans Pro', sans-serif;
}
.sub-text {
color: white;
font-weight: 100 !important;
font-size: 15pt;
font-family: 'Open Sans Condensed', sans-serif;
}<body>
<div class="container">
<img class="logo" src="http://placehold.it/300x200?text=Logo" />
</div>
<div id="text-container">
<p id="title-text">CONSTRUCTION IN PROGRESS <br/><br/>
<span class="sub-text">WE ARE CURRENTLY BUILDING EXCITING PROJECTS FOR YOU,<br/></span>
<span class="sub-text">PLEASE CHECK BACK AGAIN SOON FOR OUR NEW AND IMPROVED WEBSITE.</span>
</p>
</div>
</body>我想要 Logo 和正文中心带有文本的 div。将 div 放在 logo 下。
最佳答案
您可以使用flexbox 属性代替绝对、相对定位。
在 body 中，flex 用于水平放置 img 和 text 容器。
body {
display: flex; // so that it's content can be centered;
height: 100vh; // To make it fit the whole screen
}
然后我添加了包含容器的 center div:
.center {
margin: auto;
width: 100%; // to be full width
}
body {
background-image: url("https://cdn.pixabay.com/photo/2016/06/17/06/04/background-1462755_960_720.jpg");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
margin: 0;
display: flex;
height: 100vh;
}
.center {
margin: auto;
width: 100%;
}
.container {
display: flex;
}
img.logo {
position: relative;
max-width: 128px;
max-height: 128px;
margin: auto;
}
#text-container {
background-color: rgba(0, 0, 0, 0.6);
}
#title-text {
text-align: center;
padding: 20px;
color: #f09020;
font-size: 1.5em;
font-weight: 600;
font-family: "Source Sans Pro", sans-serif;
}
.sub-text {
color: white;
font-weight: 100 !important;
font-size: 15pt;
font-family: "Open Sans Condensed", sans-serif;
}<div class="center">
<div class="container">
<img class="logo" src="http://ejad.solutions/cloud/elogo.jpg" />
</div>
<div id="text-container">
<p id="title-text">
CONSTRUCTION IN PROGRESS <br /><br />
<span class="sub-text"
>WE ARE CURRENTLY BUILDING EXCITING PROJECTS FOR YOU,<br
/></span>
<span class="sub-text"
>PLEASE CHECK BACK AGAIN SOON FOR OUR NEW AND IMPROVED WEBSITE.</span
>
</p>
</div>
</div>关于html - 响应中心图像和文本与背景，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57314495/