[Tailwind] 이미지의 정중앙에 텍스트를 넣어보자

위처럼 이미지 가운데에 텍스트를 넣는 방법이다.

흰 박스는 이미지라고 가정한다.

해결법 (tailwind)

<div className="relative"> // 부모 요소에 relative
  <StoreImage /> // StoreImage 라는 styled-components를 만들어놨다고 가정
  <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
    강남구 TOP 10
  </div>
</div>

tailwind 를 이용하면 위처럼 작성하면 된다.

해결법 (css)

<div style={{ position: 'relative' }}> {/* 부모 요소에 relative */}
  <StoreImage /> {/* StoreImage 라는 styled-components를 만들어놨다고 가정 */}
  <div style={{
    position: 'absolute',
    top: '50%',
    left: '50%',
    transform: 'translate(-50%, -50%)'
  }}>
    강남구 TOP 10
  </div>
</div>

relative

요소를 원래 있어야 할 위치로부터 상대적으로 ~~만큼 이동한다.

반대로 이동한다고 생각하면 된다.

div {
  position: relative;
  top: 20px;
  left: 20px;
}

이 코드에선 아래로 20px, 오른쪽으로 20px 이동한다고 이해하면 된다.