CSS를 사용하여 이미지 위에 텍스트를 중앙에 배치하려면 어떻게 해야 합니까?

CSS를 사용하여 이미지 중앙에 텍스트 배치

이 기사에서는 CSS를 사용하여 이미지 위에 텍스트를 중앙에 배치하는 기술을 살펴보겠습니다.

간단한 솔루션

기본 텍스트 달성 이미지를 중심으로 다음 단계를 따르세요.

• 텍스트 요소에 위치: 절대값을 사용하세요.
• 왼쪽 속성을 0으로, 너비 속성을 100%로 설정하세요.
• 여백: 0으로 텍스트를 가로 중앙에 배치합니다. auto.

예:

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

.image {
   position: relative;
}

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

z-Index 사용

이미지 위에 텍스트가 나타나는 경우 이미지보다 높은 값으로 텍스트 요소에 Z-인덱스를 적용합니다. z-index.

예:

<div>

#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;
}

위 내용은 CSS를 사용하여 이미지 위에 텍스트를 중앙에 배치하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!