私は画像の上にテキストを追加する助けが必要です

Question

なぜこのコードは私のテキストを画像の中心に置かないのですか？私はしばらくこのことに取り組んできましたが、これは私を夢中にさせようとしています。とてもシンプルなことが問題を起こしています。

.header-txt { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 50%; 
 
    width: 100%; 
 
    text-align: center; 
 
    font-size: 5em; 
 
} 
 

 
.header-wrapper { 
 
    postion: relative; 
 
} 
 

 
.header-img { 
 
    width: 100%; 
 
    height: auto; 
 
}

<div class="header-wrapper"> 
 
    <img class="header-img" src="http://science-all.com/images/wallpapers/website-background-images/website-background-images-20.png" alt="macbook">  
 
    <div class="header-txt">Hello</div> 
 
</div>

Answer 1

本当に簡単な物事のカップル。まず、top:50%を忘れる必要があります。あなたがこれを行うとき、divは上から50％を開始し、50％を中心としません。だからあなたがするのはtop:0;とbottom:0;です。次にあなたのdivを身長にする必要があります。私が通常行っているのは、動的な高さのdivでないということです。テキストがたくさんあるわけではなく、レスポンシブデザインでサイズを変更すると、同じ高さになります。右クリックして要素の高さを調べますそれはあなたがそれを高さを与えることができます。だからあなたのdivは約90 pxですので、90 pxの高さを追加します。次に、垂直マージンをautoに設定します。margin:auto 0;次に、絶対配置されたdivを相対位置付けdivの中央に配置する必要があります。したがって、あなたのCSSは次のようになります：

.header-txt { 
    position:absolute; 
    top:0;bottom:0; 
    margin:auto 0; 
    width:100%; 
    height:90px; 
    font-size:5em; 
    text-align:center; 
} 
.header-wrapper { 
    position:relative; 
} 
.header-img { 
    width: 100%; 
} 

動的高さのdivを使用する場合は、別の手法を使用する必要があります。この手法では、上下のパーセンテージを設定します。たいていの人は、divを中心にするためにCSS変換プロパティを使用しています。これは非常に便利な技術であり、現在は非常に優れたブラウザサポートを提供しています。ここでは、このテクニックのブラウザサポートがあり、ほとんどのブラウザで今サポートされていますTransform property broswer support。それでは、あなたのCSSは次のようになります。いけない、私はあなたの質問のように感じる上記のコメントでは、これらの馬鹿を心配

.header-txt { 
    position:absolute; 
    left: 50%; 
    top: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
    font-size:5em; 
} 
.header-wrapper { 
    position:relative; 
} 
.header-img { 
    width: 100%; 
} 

このフォーラムは、のためのものであり、彼らは何かを知っているので、サイトを感じる頻繁に何人かの人々がちょうど題したものですあなたはそうしない。私はもうこのサイトで尋ねられる多くの質問にこれを見て、それは本当に私を狂ってしまう。あなたは明らかにこれを理解しようとしましたが、これをどうやって仕上げるかについて少し質問がありました。

とにかくうまくいけば、これが助けになりました。