将标题置于没有Flexbox的响应式图像之上 [英] Put heading on top of Responsive image without Flexbox

问题描述

我想把一个标题放在一个图像的顶部，垂直和水平居中对齐。我已经通过Flexbox实现了。但是，有些浏览器不支持Flexbox。有没有办法做到这一点没有flexbox？

注意：图片必须是响应式的。所以我不能使用背景图像div

 < div class =col-md-3 col-6 category @点击= openPopup（ '水泥'） > 
< img src =https://www.quotzap.com/static/images/categories/cement.jpgwidth =100％/> 
< h2>水泥< / h2> 
< / div> 
 
 .category {
 cursor：pointer; 
过渡：全部.2s缓解; 
 justify-content：center; 
 display：-webkit-flex; 
 display：flex; 
 align-items：center; 
} 
 .category h2 {
 max-width：100px; 
 text-align：center; 
 position：absolute; 
颜色：#ffffff; 
 line-height：1.5; 
} 
 .category img {
 border-radius：5px; 
 box-shadow：0px 2px 10px 0px rgba（143,143,143,0.68）; 
 position：relative; 
 -webkit-filter：brightness（70％）; 
过渡：全部.2s缓解; 
 
  

解决方案

试着改变你的CSS ...

  .category {
 cursor：pointer; ...如果您不想使用弹出框。 
过渡：全部.2s缓解; 
 justify-content：center; 
 position：relative; 
 align-items：center; 
 z-index：0; 
} 
 .category h2 {
 max-width：100px; 
 text-align：center; 
 top：50％; 
剩下：50％; 
转换：translate（-50％，-50％）; 
宽度：50％; 
 position：absolute; 
颜色：#ffffff; 
 line-height：1.5; 
 z-index：2; 
} 
 .category img {
 z-index：1; 
 border-radius：5px; 
 box-shadow：0px 2px 10px 0px rgba（143,143,143,0.68）; 
 position：relative; 
 -webkit-filter：brightness（70％）; 
过渡：全部.2s缓解; 
} 
  

I want to put a heading on top of an image, vertically and horizontally center aligned. I've achieved it through Flexbox. However, some browsers are not supporting Flexbox. Is there is any way to do it without flexbox?

Note: The image must be responsive. So I can't use background image for div

<div class="col-md-3 col-6 category" @click="openPopup('cement')">
  <img src="https://www.quotzap.com/static/images/categories/cement.jpg" width="100%" />
  <h2>Cement</h2>
</div>

.category{
  cursor: pointer;
  transition: all .2s ease;
  justify-content: center;
  display: -webkit-flex;
  display: flex;
  align-items: center;
}
.category h2{
  max-width: 100px;
  text-align: center;
  position: absolute;
  color: #ffffff;
  line-height: 1.5;
}
.category img{
  border-radius: 5px;
  box-shadow: 0px 2px 10px 0px rgba(143,143,143,0.68);
  position: relative;
  -webkit-filter: brightness(70%);
  transition: all .2s ease;
}

解决方案

Try changing your CSS to this... if you dont want to use flex box.

.category{
  cursor: pointer;
  transition: all .2s ease;
  justify-content: center;
  position: relative;
  align-items: center;
  z-index: 0;
}
.category h2{
  max-width: 100px;
  text-align: center;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:50%;
  position: absolute;
  color: #ffffff;
  line-height: 1.5;
  z-index:2;
}
.category img{
  z-index: 1;
  border-radius: 5px;
  box-shadow: 0px 2px 10px 0px rgba(143,143,143,0.68);
  position: relative;
  -webkit-filter: brightness(70%);
  transition: all .2s ease;
}

这篇关于将标题置于没有Flexbox的响应式图像之上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！