div要素の縦横のテキストを中央に揃える方法

Question

div要素の画像の上にテキストを配置したい。

これは私が試したものです：

CSS：

.container { 
    margin: 0 auto; 
    max-width: 1200; 
} 
.header { 
    width: 100%; 
} 
.ring { 
    max-width: 100%; 
    position: relative; 

} 
.flex_text { 
    position: absolute; 
    color: #B64547; 
    z-index: 100; 
    font-family: Poppins; 
    font-size: 30px; 
    text-align: center; 
} 


.cell img { 
    display: block; 
} 

HTML：

<div class="container"> 
    <div class="grid"> 
     <div class="cell"> 
      <h4 class="flex_text">Brewing, get started!</h4> 
      <img src="img/Kaffe_1.jpg" alt="Ring1" class="ring"> 
     </div> 

これは明らかに、動作しませんでした。このウェブサイトは応答性が高いので、ソリューションは応答性にも影響するはずです。

私は周りを見回し、さまざまなことを試みましたが、うまく機能しませんでした。 わかりませんが、jqueryの解決策がありますか？親要素の 感謝:)

Answer 1

position: relative;とdisplay: inline-block;（またはあなたができるfloatそれ）それは、テキストを中央にtop: 50%; transform: translateY(-50%); left: 0; right: 0;、その後、画像の周りに、相対位置の正方形を描画しますので。あなたがここにフレックスを使用して検討することができ

.container { 
 
    margin: 0 auto; 
 
    max-width: 1200; 
 
} 
 
.header { 
 
    width: 100%; 
 
} 
 
.ring { 
 
    max-width: 100%; 
 
    position: relative; 
 

 
} 
 
.cell { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.flex_text { 
 
    position: absolute; 
 
    color: #B64547; 
 
    z-index: 100; 
 
    font-family: Poppins; 
 
    font-size: 30px; 
 
    text-align: center; 
 
    top: 50%; 
 
    margin: 0; 
 
    left: 0; right: 0; 
 
    transform: translateY(-50%); 
 
} 
 

 

 
.cell img { 
 
    display: block; 
 
}

<div class="container"> 
 
    <div class="grid"> 
 
     <div class="cell"> 
 
      <h4 class="flex_text">Brewing, get started!</h4> 
 
      <img src="http://www.jqueryscript.net/images/Simplest-Responsive-jQuery-Image-Lightbox-Plugin-simple-lightbox.jpg" alt="Ring1" class="ring"> 
 
     </div>

Answer 2

。

チェックこのスニペット

.grid { 
 
    position: relative; 
 
} 
 
.cell { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
.flex_text { 
 
    position: absolute; 
 
    color: red; 
 
} 
 
.cell img {}

<div class="container"> 
 
    <div class="grid"> 
 
    <div class="cell"> 
 
     <h4 class="flex_text">Brewing, get started!</h4> 
 
     <img src="http://www.planwallpaper.com/static/images/9-credit-1.jpg" width=200px height=200px alt="Ring1" class="ring"> 
 
    </div> 
 
    </div> 
 
</div>

希望これはhttps://css-tricks.com/centering-css-complete-guide/（[CSSでセンタリング]