2

我在这里搜索并得到了很多答案，但它们似乎不起作用。我所拥有的是一个带有图像填充 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;
}
4

3 回答 3

0

您可以将 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;
}
于 2013-07-21T15:26:45.150 回答
0

我和你有同样的问题，我要解决这个问题。

  1. 您有一个带有背景图像（表格）的 div
  2. 保存标题的框（表格单元格）
  3. 将 #2 居中的框（表）
  4. 标题的实际内容（不同）

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

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

由于#2 在#3 的内部，而#3 在#1 的内部，所以你会在表的内部得到一个表，因此你可能还需要另一个围绕#3 的包装器作为表格单元格以使#3 居中 

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;
}
<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>

请参阅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 vw标题的框或文本本身的测量值来根据屏幕大小调整大小。您将遇到的问题是文本在某些时候会变得太小而无法阅读，或者在桌面上看起来会很大。这就是为什么我建议使用： @media (min-width: 50em) and (max-width: 68.75em) {/*CSS for medium screen*/} @media (max-width: 50em) {/ ... /}` 然后进入并调整屏幕大小并为手机和小屏幕进行任何更改（chrome 开发人员模式有一个工具为了这）

于 2017-04-07T16:52:57.360 回答
0

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;
}
于 2017-04-07T17:59:39.957 回答