[image] CSS - Image Text - (이미지 위에 텍스트 배치/띄우기)

이미지 위에 텍스트 배치/띄우기

 

<style>

.box {position: relative;  text-align: center;  color: white;}

.box img {max-width:100%;}

.bottom-left {  position: absolute;  bottom: 8px;  left: 16px;}

.top-left {position: absolute;  top: 8px;  left: 16px;}

.top-right {position: absolute; top: 8px; right: 16px;}

.bottom-right {position: absolute; bottom: 8px; right: 16px;}

.centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}

</style>

<div class="box">

  <img src="https://source.unsplash.com/random" alt="랜덤이미지">

  <div class="bottom-left">하단 좌측</div>

  <div class="top-left">상단 좌측</div>

  <div class="top-right">상단 우측</div>

  <div class="bottom-right">하단 우측</div>

  <div class="centered">정중앙</div>

</div>

 

결과보기