예전 포스트에서 요소를 가운데 정렬하는 방법을 다뤘었습니다.

이때 소개한 방법은 요소 내부에 다른 요소가 있을 경우에 정렬하는 방법이었습니다. 그래서 오늘은 <div>태그 내부에 텍스트만 있을 때, 이 텍스트를 정렬하는 방법에 대해 알아보도록 하겠습니다.

<div id="myDiv">
  text
</div>

#myDiv {
  width: 500px;
  height: 200px;
  background: #77eeee;
}

---

text-align

text-align 속성의 center값을 사용하면 가로로 가운데 정렬을 할 수 있습니다.

#myDiv {
  width: 500px;
  height: 200px;
  background: #77eeee;

  text-align: center;
}

---

justify-content

display속성이 flex로 지정되었을 경우엔 justify-content속성을 center로 설정하면, 가로로 가운데 정렬을 할 수 있습니다.

#myDiv{
  width: 500px;
  height: 200px;
  background: #77eeee;

  display: flex;
  justify-content: center;
}

---

padding

padding 속성도 정렬에 사용할 수 있습니다.

padding속성을 이용하면, 텍스트를 세로로 가운데 정렬할 수 있습니다. 위아래의 padding 값만을 설정해서 영역의 크기 중 가운데에 글씨를 몰아넣는 원리입니다.

#myDiv{
  background: #77eeee;

  padding: 50px 0;
}

---

line-height

line-height속성은 텍스트 사이에서 줄 사이의 간격을 조정하는 속성입니다. 이때, 한 줄 짜리 텍스트의경우 line-height를 div 영역의 height와 동일하게 설정한다면 줄 사이 간격이 영역 크기와 동일해지기 때문에 글자가 세로로 가운데로 오는 효과를 얻게 됩니다.

그래서 line-height 속성을 이용하면 글자를 세로로 가운데 정렬할 수 있습니다.

#myDiv{
  width: 500px;
  height: 200px;
  background: #77eeee;

  line-height: 200px;
}

align-items

align-items는 display속성이 flex일 때 세로로 가운데 정렬을 할 수 있습니다.

#myDiv{
  width: 500px;
  height: 200px;
  background: #77eeee;

  display: flex;
  align-items: center;
}

전에도 소개했지만, display 속성이 flex일 때 justify-content와 align-items를 동시에 사용하면, 요소와 텍스트를 정중앙에 정렬할 수 있습니다.

#myDiv{
  width: 500px;
  height: 200px;
  background: #77eeee;

  display: flex;
  justify-content: center;
  align-items: center;
}

---

이렇게 오늘은 <div>에서 요소가 아닌 단순 텍스트를 가운데 정렬하는 방법을 알아보았습니다.