[css] 텍스트 요소 가로, 세로 가운데 정렬

방법 1. line-height를 부모크기 만큼 설정

반응형 웹일 경우 한줄 짜리가 두줄이 될 때 이상하게 변경된다.

이미지로 할때는 baseline으로 되어 있어서 살짝 위쪽으로 올라와 있다.

<div class="wrapper">
  apple banana cherry
</div>

.wrapper {
  border: 1px solid black;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

 

 

 

방법2. 상위 요소에 padding을 줌으로써 가능

height 를 줄 순 없지만 padding 으로 상하 여백을 균일하게 설정함으로써 문자열이 가운데에 정렬하게 된다.

em으로 설정한 이유는 해당 요소의 폰트사이즈에 비례해서 증가하기 때문에 유지보수에 편하다

 

<div class="wrapper">
  apple banana cherry
</div>

.wrapper {
  border: 1px solid black;
  text-align: center;
  padding: 2em 0;
}

 

 

 

 

https://www.youtube.com/watch?v=PEYt17TlTQk