CSS を使用してテキストを画像の中央に配置するにはどうすればよいですか?

CSS を使用して画像上でテキストを中央揃えにする

この記事では、CSS を使用して画像上でテキストを中央揃えにする手法について説明します。

簡単な解決策

基本的なことを実現するには画像の中央にテキストを配置するには、次の手順を実行します。

• テキスト要素に位置:絶対を使用します。
• left プロパティを 0 に設定し、width プロパティを 100% に設定します。
• テキストを水平方向に中央に配置し、余白を 0 にします。 auto.

例:

<div class="image">
    <img  src="/static/imghwm/default1.png" data-src="sample.png" class="lazy" alt="CSS を使用してテキストを画像の中央に配置するにはどうすればよいですか?" >
    <div class="text">
       <h2 id="Some-text">Some text</h2>
    </div>
</div>

.image {
   position: relative;
}

.text {
   position: absolute;
   left: 0;
   width: 100%;
   margin: 0 auto;
}

z-Index の使用

テキストが画像の上に表示される場合は、画像よりも高い値の Z-index をテキスト要素に適用します。 z-index.

例:

<div><pre class="brush:php;toolbar:false">#container {
    height: 400px;
    width: 400px;
    position: relative;
}

#image {
    position: absolute;
    left: 0;
    top: 0;
}

#text {
    z-index: 100;
    position: absolute;
    color: white;
    font-size: 24px;
    font-weight: bold;
    left: 150px;
    top: 350px;
}