フレックスボックスを使用しないレスポンシブ画像の上に見出しを付けよう

Question

画像の上に見出しを置き、縦と横を中央に揃えたい。私は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; 
} 

Answer 1

フレックスボックスを使いたくない場合は、CSSをこれに変更してみてください。

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