使代码更具响应性（文本覆盖图像）答案

【问题标题】：Make Code more Responsive (Text over Image)使代码更具响应性（文本覆盖图像）
【发布时间】：2016-12-11 09:50:33
【问题描述】：

如果使用百分比而不是像素，您将如何创建它？基本上，无论图像的大小如何，它总是水平和垂直居中。每当我尝试使用百分比进行创建时，深色背景会完全突出图像的一侧。

HTML：

<div class="gallery">
<div class="gallery-image">
  <img src="http://37.media.tumblr.com/bddaeb8fe12eda6bb40cf6a0a18d9efa/tumblr_n8zm8ndGiY1st5lhmo1_1280.jpg" width="300" height="200" />

<div class="gallery-text">

<h3>BOOM!</h3>

</div>    
</div>  
</div>

CSS：

.gallery {
    width:300px;
    height:200px;
    position: relative;
    padding: 0;
    margin: 0;
    text-align: center;
}

.gallery-image{
    cursor:pointer;
    position: relative;
    display: block;
}

.gallery-text{
    position: absolute;
    top: 0; right: 0;
    bottom: 0; left: 0;
    width: 300px;
    height: 200px; 
    text-align: center;
    background-color: rgba(0,0,0,0.8);
    opacity: 0;
    -webkit-transition: opacity 0.6s;
    -moz-transition: opacity 0.6s;
    transition: opacity 0.6s;
   vertical-align:middle;
   line-height:200px;
}

.gallery-text:hover{
    opacity: 1;      
}

.gallery-text h3{
    color: white;
    display: inline-table;
   vertical-align:middle;
   line-height:100%;            
}

【问题讨论】：

使用display: table 添加包装器div 和使用display: table-cell 的内部包装器以及其他类似图像的内容将在表格内。
你能发布 jsfiddle/codepen 吗？

标签： html css responsive-design position center

【解决方案1】：

检查这个sn-p，希望这对你有帮助！

.gallery {
    position: relative;
    padding: 0;
    margin: 0;
    text-align: center;
}

.gallery-image{
    position:relative;
    width:30%;
    height:30%;
    margin:10px;
}
.gallery-image1{
    position:relative;
    width:50%;
    height:50%;
}
.gallery-image img {
    width:100%;
    vertical-align:top;
}
.gallery-image:after {
    content:'\A';
    position:absolute;
    width:100%; height:100%;
    left:0;
    top: 0;
    background:rgba(0,0,0,0.8);
    opacity:0;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
}
.gallery-image:hover:after {
    opacity:1;
}

<div class="gallery">
<div class="gallery-image">
  <img src="http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=8319683" />

<div class="gallery-text">

</div>    
</div>  
  
  <div class="gallery-image gallery-image1">
  <img src="http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=8319683" />

<div class="gallery-text">

</div>    
</div>  
</div>

【讨论】：

很漂亮但是没有文字？
哦，但我认为你是故意这样做的。
是的，叠加层现在可以响应了。但是，您可以将内容替换为您想要的任何文本！
例子？将文本放在画廊文本下？这太棒了！
然后你必须使用 jQuery 传递文本，如果它是静态内容，你只需将类添加到 div 并定义样式，就是这样！

【解决方案2】：

试试这个：

display: flex;
justify-content: center;
flex-direction: column;
height: 100%;

在你的.gallery-text-class 上:)

【讨论】：

【解决方案3】：

.main-wrapper {
  display: table;
  width: 100%;
  background: #226699;
}

.img-holder {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  height: 500px;
}

img {
  max-width: 90%;
  max-height: 90%;
  display: inline-block;  
}

<div class="main-wrapper">
  <div class="img-holder">
    <img src="http://placehold.it/1000x1000" />  
  </div>
</div>

【讨论】：

【解决方案4】：

position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

尝试在你的 .gallery-text 类上使用这个 css。

【讨论】：