文本在图像 - 响应

这是我的第一个问题洙......我必须做些事情是这样的：文本在图像 - 响应

，但我搜索了很多，没有什么工作对我来说，我有这样的事情在我的HTML和CSS

.thumbnail { 
 
    position: relative; 
 
    margin-bottom: 0; 
 
    border: 0; 
 
    border-color: transparent; 
 
} 
 

 
.caption { 
 
    position: absolute; 
 
    top: 40%; 
 
    left: 0; 
 
    width: 100%; 
 
}

<div id="box-search"> 
 
     <div class="thumbnail text-center"> 
 
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Granola03242006.JPG/280px-Granola03242006.JPG" alt=""> 
 
      <div class="caption"> 
 
       <p>[email protected]</p> 
 
       <p>+56983874071 | +56228231294</p> 
 
       <p>El Aguilucho 3174, Providencia, Región Metropolitana</p> 
 
      </div> 
 
     </div> 
 
    </div>

的工作，但是当我使用来自CH的响应模式罗马，文字离开图像

（对不起我的英语，我说西班牙语）

来源

2017-04-10 Javier Gonzalez

img { 
 
    display: block; 
 
} 
 

 
.thumbnail { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.caption { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    text-align: center; 
 
    color: white; 
 
    font-weight: bold; 
 
}

<div id="box-search"> 
 
     <div class="thumbnail"> 
 
      <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Granola03242006.JPG/280px-Granola03242006.JPG" alt=""> 
 
      <div class="caption"> 
 
       <p>[email protected]</p> 
 
       <p>+56983874071 | +56228231294</p> 
 
       <p>El Aguilucho 3174, Providencia, Región Metropolitana</p> 
 
      </div> 
 
     </div> 
 
    </div>

来源

2017-04-10 21:58:37 hungerstar

的'p'的上边距使得它有点偏离垂直中心线.. – LGSon

实际上，我认为'img'仍然在使用'display：inline;'而下边的高度会产生这种差异。由于'p'具有相等的顶部和底部边距，因此它应该垂直居中。虽然有点不错，但它很好！ – hungerstar

是的，那是我的不好 – LGSon

文本在图像 - 响应

回答

相关问题