텍스트 가운데 중간 정렬하기

텍스트 중간 정렬하는 방법 2가지

이미지와 같이 text 태그들 중간 정렬은 flex를 align-item : center; justify-content: center;를 하여도 이렇게 사이즈 정렬이 안됩니다. 이때 텍스틀 중간 정렬을 하는 방법은 2가지가 있습니다. 첫번째는 padding에 위아래 높이를 주어 중간 정렬을 하기, 두 번째는 div와 같은 요소안의 텍스트의 높이와 감싸진 요소의 높이를 맞춰주는 것입니다. 필자는 두 번째 방법이 더 깔끔하다 느껴져 텍스트 높이사이즈와 요소사이즈를 동일하게 주어 가운데 정렬을 맞춰주는 것을 선호합니다. 아래 이미지로 가운데 정렬을 주려합니다.

 

padding값 위아래 주기

위 코드는 a태그로 만들어진 버튼입니다.

padding값을 아래 코드처럼 주면 중간 정렬이 되는 것을 확인할 수 있습니다.

.cta-button {
    width:26rem;
    padding: 1.2rem 0;
}

 

 

text 높이와 요소 높이 맞춰서 가운데 정렬하기

우리가 height 속성으로 요소의 높이를 정하는 것처럼 line-height 속성을 이용하면 text의 높이를 정할 수 있습니다.

line-height 속성 이용하기

아래 코드처럼  height 속성과 line-heigth 속성을 맞추면 가운데 정령이 된 것을 확인할 수 있습니다.

.cta-button {
    width:26rem;
    height: 3rem;
    line-height: 3rem;
}

 

각자 취향이나 속한 프로젝트 팀의 스타일 컨벤션에 맞춰 작업하는 것을 추천합니다!