Question

我在这里搜索并得到了很多答案，但他们似乎没有工作。我所拥有的是一个带有填充div的图像的div（100％以使其响应）。现在我想在图像上放一些信息，所以我用了一篇文章。但我的问题是，当我缩小页面时，我无法让文章保持在图像的中心（水平和垂直）。它水平居中，但垂直方向刚刚熄灭，破坏了下面的部分（虽然我还没有对它们进行过处理）。任何解决方案表示赞赏感谢。

HTML：

    <div class="featuredpost">
    <img src="images/forest.jpg">

    <div  class="featured"> 
        <article>
            <header>
                <h1><a href="#">Featured Post Goes Here</a></h1>
            </header>

            <footer>
                <p class="postedby">Postedby User</p>
            </footer>

            <content>
                <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
                <p>"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
            </content>

            <button type="button" onclick="alert('Hello world!')">Read More</button>
        </article>  
    </div>  
</div>

CSS：

.featuredpost{
width: 100%;
margin: 0 auto; 
}

.featuredpost img{
    width:100%; 
    height: auto;
    position: relative;
}

.featured{
    margin: 0 auto;
    width: 80%; 
    background-color: rgba(0,0,0,0.5);  
    color: #fff;    
    top:50%;
    position: absolute;
    left: 10%;
}

.featured article{
    padding: 10px 30px;
}

Answer 1

您可以将html / body设置为一个表格单元格。

http://codepen.io/anon/pen/Iplbv

html {
  display: table;
  height: 100%;
  width: 100%;
  background-size: cover;
}
body {
  display:table-cell;
  vertical-align:middle;
}
.featured{
    margin: 0 auto;
    width: 80%; 
    background-color: rgba(0,0,0,0.5);  
    color: #fff;
  position:relative;
}
.featuredimg {
  position:absolute;
  top:0;
  left:0;
  width:100%;
}

甚至将图像设置为背景：

http://codepen.io/anon/pen/wKrae

html {
  display:table;
  height:100%;
  width:100%;
  background:url(images/forest.jpg);
  background-size:cover;
}
body {
  display:table-cell;
  vertical-align:middle;
}

Answer 2

我遇到了与你相同的问题，我将继续这样做。

你有一个带背景图片的div（表格）
用于保存标题的框（table-cell）
位于（表格）
标题的实际内容（不尽相同）

这是一个伪代码示例，因此您可以看到嵌套

    <1 table>
     <3 table>
      <2 cell>title</2>
     </3>
    </1>

由于＃2在＃3内部而＃3在＃1内部，因此你可以在表格中找到一个表格，因此你可能还需要另一个围绕＃3的包装作为一个表格单元格来中心＃3

＆＃13;

article header h2:after{
content: "";
display: block;
border-bottom: 1px solid #3cc19c;
margin: 1em 45%;
}
.image-box { /*  BACKGROUND FOR HEADER */
background-image: url(https://placeholdit.imgix.net/~text?txtsize=83&txt=1000%C3%97500&w=1000&h=500);
background-size: cover;
background-repeat: no-repeat;
display: table;
width: 100%;
}
.title-container-frame{ /* BOX FOR TITLE TO SIT IN */
width: 300px;
height: 300px;
background: white;
display: table;
outline: 4px double white;
margin: 100px auto;
}
.title-container{ /* HOLDS THE TITLE TO BE CENTERED */
display: table-cell;
vertical-align: middle;
}
article{
  text-align:center;
}

＆＃13;

<article>
	<header>
		<div class="image-box">

				<div class="title-container-frame">
					<div class="title-container">
						<h2>Meet Shawn</h2>
						<h3>A stand up guy</h3>
					</div>
				</div>
		</div>
	</header>
	<div class=bit-2>
		<hr>
		<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
		<p>Candid wedding photogrpahy is my passion.  I can't imagine doing anything else for a living.  The best wedding photography captures raw emotional moments that words cannot capture.</p>
		<p>True-to-life imagery is the new direction of wedding photography.  We provides beautiful images to our clients on their wedding day while everyone is chomping at the bit to see them.</p>
		<p>"Lorem derit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
		<p>Please feel free to contact me <a>email@email.com</a> I would love to answer any questions you might have.</p>
	</div>
</article>

＆＃13;

参见https://jsfiddle.net/0qa2g4b5/ 我会将图像分成必须首先响应不断变化的屏幕尺寸的所有部分，然后提出你的css解决方案。这就是我上面尝试做的事情。

它将依赖于您希望最终结果如何响应较小屏幕的具体细节。

最优雅的解决方案是@media css，当你认为它们看起来不错时，可以调整你的风格。

一些容易不那么优雅的解决方案似乎都有缺点，这里有一些你可以考虑和缺点，所以你知道你是否可以忍受：

如果背景图片纯粹用于设计并且可以剪裁，则可以使用background-size: cover;如果您需要背景宽度占据div的100％并且仍然显示整个图像使用background-size:contain封面在某些情况下会裁剪你的形象。

您不能同时包含灵活大小的背景div并保留固定高度的内部容器，如标题框，因为如果您从横向方面更改，标题框的高度将高于背景比例如16：9与垂直保持的iphone宽高比9:16。

因此，如果您希望它完全调整大小，以便使用div调整标题文字大小，您可以在容器上font-size:1em并在文本上font-size:inherit或使用vh {{1}测量包含标题的框或文本本身根据屏幕大小调整大小。您遇到的问题是文本在某些时候会变得太小而无法读取，或者在桌面上看起来会很大。这就是为什么我建议使用： vw @ media（max-width：50em）{/ ... /}` 然后进入并调整屏幕大小并对手机和小屏幕进行所需的更改（chrome developer mode有一个工具）

Answer 3

<强> HTML

<div id="container">
  <div id="overlay"></div>
  <img id="img" />
</div>

<强> CSS

#container {
    position: relative;
}
#overlay, #img {
    position: absolute:
    top: 0px; left: 0px;
}
#overlay {
    z-index: 5;
}

将div居中放在图像上

3 个答案: