将标题置于没有Flexbox的响应式映像之上(Put heading on top of Responsive image without Flexbox)

将标题置于没有Flexbox的响应式映像之上(Put heading on top of Responsive image without Flexbox)

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

注意：图像必须是响应式的。 所以我不能将背景图像用于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; }

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

最满意答案

尝试将CS​​S更改为此...如果您不想使用弹性框。

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

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