问题：
具有背景的响应中心图像和文本
郁博学
**编辑：我已经能够以文本和图像居中的div，但我希望div的背景是全宽的。我无法使背景和文本与车身中心对齐的徽标和全宽div（响应性）
**编辑2：这就是我试图实现的目标：在此处输入图像描述
我已经试着把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>我想要两个标志和div与文本在身体的中心。在标志下放置div。
共有3个答案
慕朝明
我建议使用transform:translateY（-50%）；在这种情况下，因为我认为在容器中显示整个身体不是一个好主意。
您必须在同一层中包含img和文本容器才能一起工作。
提示：在超文本标记语言中，css属性不能使用id
给你结果
body, html {
height: 100%;
}
body {
background-image: url('http://lorempixel.com/1600/400/abstract/');
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
margin: 0;
}
.container {
position: relative;
top: 50%;
transform: translateY(-50%);
text-align:center;
}
#text-container {
width:100%;
background: red;
}
#text-container p{
text-align: center;
padding-top:40px;
padding-bottom:40px;
}
.logo {
max-width: 200px;
}
#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://ejad.solutions/cloud/elogo.jpg" />
<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>
</body>
谢典
添加了. flex容器，用于居中包含徽标和文本的. full-容器
您的flex容器应具有全屏幕宽度和高度。这里我使用了宽度：100vw和高度：100vh
*{
margin:0;
padding:0;
}
body {
background-image: url('images/background.jpg');
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
margin: 0;
}
.flex{
width:100vw;
height:100vh;
display:flex;
align-items:center;
}
.full-container{
width:100%;
}
img.logo {
position:relative;
display:block;
margin: 0 auto;
margin-bottom:20px;
max-width:100%;
max-height:100%;
}
#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="flex">
<div class="full-container">
<img class="logo" src="https://cdn.pixabay.com/photo/2017/03/19/20/19/ball-2157465__340.png" width="150"/>
<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>
</div>
</body>
洪增
您可以使用flexbox属性，而不是定位绝对、相对。
在bodyflex中，flex用于水平定位img和文本容器。
body {
display: flex; // so that it's content can be centered;
height: 100vh; // To make it fit the whole screen
}
然后我添加了包含容器的centerdiv：
.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;
}html prettyprint-override"><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>
类似资料：
-
问题内容： 如何在JPANEL上放置图像背景？ 问题答案： 这是一个解释。
-
问题内容： 我有一个网站（g-floors.eu），并且我想使背景（在CSS中我为内容定义一个bg图像）也具有响应性。不幸的是，除了我可以想到的一件事外，我真的对如何执行此操作一无所知，但这是一个解决方法。创建多个图像，然后使用css屏幕大小更改图像，但是我想知道是否有更实用的方法来实现此目的。 基本上，我想要实现的是图像（带有水印“ G”）自动调整大小，而不会显示更少的图像。如果可能的话 我到目
-
背景图像在大屏幕上不显示为完整图像，但在小屏幕上很合适。 在所有的屏幕上，图像都有一个特定的维度来作为响应？
-
问题内容： 我对前端开发和基础非常陌生。 我正在尝试成为响应时按比例缩小的全屏图像。 谁能告诉我我在做什么错？它可以正确缩放，但无法显示完整图像。我还希望将其放在移动设备上，这可能吗？ HTML： CSS： 问题答案： //HTML 要么 要么
-
我想在ImageView中将图像居中。ImageViews用于列表中图片的缩略图，我使用了宽度和高度为90的固定视口，使它看起来更干净。这些图片使用背景加载，所以我不知道图片放入ImageView时的尺寸。当然，我不想拉伸(或裁剪)图像。我在加载图像时使用preserveRatio。有什么方法可以让图像居中，而不是左上角？图像的最长边总是90度。
-
下面的外部CSS页面示例中的快速简单问题； 我知道它们会影响不同的元素选择器，我的问题是使用背景和背景图像有什么区别？一方可以访问另一方的特定属性吗？谢谢你。