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-색인 사용

텍스트가 이미지에 오버레이되도록 하려면 Z-색인을 사용하세요.

.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');

확장되도록 CSS와 HTML을 약간 조정해야 할 수도 있습니다. HTML2PDF 환경 내에서 적절한 렌더링이 가능합니다.

위 내용은 CSS를 사용하여 이미지 위에 텍스트를 중앙에 배치하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!