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

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

이미지와 같이 간혹 font 이슈로 text태그는 flex를 align-item : center; justify-content: center;를 하여도 간혼 중간 정렬이 안됩니다. 이때, 텍스트를 중간 정렬을 하는 방법은 2가지가 있습니다. 첫번째는 padding에 위아래 높이를 주어 중간 정렬을 하기, 두 번째는 div와 같은 요소안의 텍스트의 높이(line-height)와 감싸진 요소의 높이(height)를 맞춰주는 것입니다. 필자는 padding을 활용하여 중간 정렬 하는 것을 선호하는 편입니다. 아래 이미지로 가운데 정렬을 주려합니다.

 

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;
}

 

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