css 글자 높이 중간(가운데) 정렬

CSS를 사용하여 텍스트의 높이를 중앙에 맞출 수 있습니다. 일반적으로 텍스트의 수직 중앙 정렬은 line-height 속성을 활용하여 수행할 수 있습니다. 다음은 텍스트를 중앙에 맞추는 몇 가지 방법입니다.

 

1. line-height와 height 속성 사용:

css
.container {
  height: 100px; /* 원하는 높이로 설정 */
  line-height: 100px; /* 컨테이너의 높이와 동일하게 설정 */
}

2. Flexbox 사용:

css
.container {
  display: flex;
  align-items: center; /* 수직 가운데 정렬 */
  justify-content: center; /* 수평 가운데 정렬 */
}

위 코드에서 .container는 텍스트를 포함하는 요소의 클래스 이름입니다. 이 경우, display: flex 속성을 사용하여 요소 내부의 내용물을 가운데 정렬합니다. align-items: center와 justify-content: center는 텍스트를 수직과 수평으로 가운데로 정렬시킵니다. 

※ 부모 요소 혹은 자식 요소를 잘 지정하여야한다. 예를 들어 부모 Element(요소)에 flex 되어있다면 거기에 align-items: center 설정해보자

 

flex 중앙 정렬

3. Grid 사용:

이러한 방법을 사용하여 텍스트의 높이를 중앙에 맞출 수 있습니다. 필요에 따라 각 방법을 조정하여 원하는 결과를 얻을 수 있습니다.

css
.container {
  display: grid;
  place-items: center; /* 수직 및 수평 가운데 정렬 */
}

 

CSS를 사용하여 텍스트의 글자 높이를 중간에 맞추는 것은 웹 디자인에서 중요한 요소입니다. 위와 같이 line-height, height / flex, align-items / grid, place-items css(스타일링)을 사용하여 글자 높이를 중앙으로 정렬할 수 있습니다.