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

CSS を使用して画像上にテキストを配置する

この記事では、CSS を使用してテキストを画像上の中央に配置する方法を説明します。

問題のシナリオ

次のような状況が発生する可能性があります状況:

<div class="image">
    <img src="sample.png"/>
    <div class="text">
       <h2>Some text</h2>
    </div>
</div>

次の CSS を使用:

.image {
    position: relative;
}

h2 {
    position: absolute;
    top: 200px;
    left: 0;
    width: 100%;
    margin: 0 auto;
    width: 300px;
    height: 50px;
}

しかし、テキストはずれたままです。

解決策

CSS 配置を使用する

画像上にテキストを配置するには、次を使用します。 CSS の配置:

<div class="image-container">
    <img src="sample.png"/>
    <div class="text-container">
       <h2>Some text</h2>
    </div>
</div>

.image-container {
    position: relative;
}

.text-container {
    position: absolute;
    top: 50%;  /* Position the text vertically */
    left: 50%;  /* Position the text horizontally */
    transform: translate(-50%, -50%);  /* Center the text */
    color: white;
    font-size: 24px;
    text-align: center;
}

オーバーラップに z-index を使用する

テキストが画像に確実に重なるようにするには、z-index:

.text-container {
    z-index: 1;
}

代替案方法

HTML2PDF の使用

画像と中央揃えのテキストを含む PDF を作成するには、HTML2PDF を使用できます。まず、HTML コンテンツをレンダリングします:

<div>

次に、HTML2PDF を使用して HTML を PDF に変換します:

require_once('html2pdf/html2pdf.class.php');
$html2pdf = new HTML2PDF('L', 'A4', 'en');
$html2pdf->writeHTML(file_get_contents('image-container.html'));
$html2pdf->Output('random.pdf');

HTML2PDF 環境内での適切なレンダリング。

以上がCSSを使用して画像の中央にテキストを配置するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。