다음은 이미지와 텍스트가 있는 간단한 코드입니다. 이미지는 흑백 사진이고, 텍스트의 배경색은 구분하기 쉽도록 노란색으로 했습니다.
<div class="lb-wrap">
<div class="lb-text">
<h2>HELLO</h2>
</div>
<div class="lb-image">
<img src="//bit.ly/3mS3fIJ" alt="">
</div>
</div>
.lb-wrap {
width: 50%;
margin: 10px auto;
border: 1px solid #000000;
}
.lb-wrap img {
width: 100%;
vertical-align: middle;
}
.lb-text {
padding: 10px 20px;
background-color: #FFEEBC;
text-align: center;
}
가운데로 옮기기
이미지와 텍스트를 감싸고 있는 요소에
position: relative; 를 추가합니다.
텍스트를 감싸고 있는 요소에 position: absolute; 를 추가하고,
위치를 50%로 정합니다.
.lb-wrap {
width: 50%;
margin: 10px auto;
border: 1px solid #000000;
position: relative;
}
.lb-wrap img {
width: 100%;
vertical-align: middle;
}
.lb-text {
padding: 10px 20px;
background-color: #FFEEBC;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
}
하지만 꼭짓점의 위치가 위에서 50%, 왼쪽에서 50%이므로, 텍스트가 정가운데에 있지 않습니다.
이를 해결하기 위해
transform: translate(-50%, -50%); 을 추가합니다.
.lb-text {
padding: 10px 20px;
background-color: #FFEEBC;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
이제 이미지의 정가운데에 텍스트가 있습니다.
같이 보면 좋은 글
