[HTML/CSS] DIV 안의 텍스트 가운데 정렬하기 (가로, 세로)

 

이번에는

다음과 같이 div 안에 있는 text를

가로, 세로로 가운데 정렬하는 방법을 알아보겠습니다.

 

<div class='my-div'>
  안녕하세요
</div>

.my-div {
  border : 1px solid blue;
  height : 200px;
}

 

 

 

 

 

1. 가로로 가운데 정렬하기

여기에서 소개할 <div> 안의 글자를 가로로 가운데 정렬하는 방법은 다음 2가지 입니다.

• text-align
• justify-content

  text-align  

<div class='my-div'>
  안녕하세요
</div>

.my-div {
  border : 1px solid blue;
  height : 200px;
  text-align : center;
}

 

text-align : center;

text-align 속성은 가로정렬을 설정할 수 있는 속성입니다. 

여기서는, 가운데 정렬을 하기 위해 속성값을 'center'로 설정하였습니다.

 

 

  justify-content  

<div class='my-div'>
  안녕하세요
</div>

.my-div {
  border : 1px solid blue;
  height : 200px;
  display : flex;
  justify-content : center;
}

 

justify-content : center;

display 속성이 flex로 설정되어 있으면,

text-align 속성을 지정해도 가운데 정렬이 되지 않습니다.

이 때는, 위 예제와 같이

justify-content 속성을 설정해 주어야 합니다.

 

 

 

2. 세로로 가운데 정렬하기

여기서 소개할 <div> 안의 문자열을 세로로 가운데 정렬하는 방법은 다음 3가지 입니다.

• padding
• line-height
• align-items

  padding  

<div class='my-div'>
  안녕하세요
</div>

.my-div {
  border : 1px solid blue;
  text-align : center;
  padding : 100px 0;
}

 

padding : 100px 0;

여기서는 div의 padding을 지정하여,

문자열을 div의 가운데(세로)에 오도록 하였습니다.

padding 속성에 2개의 값이 입력되었는데,

첫번째 값은 위, 아래의 padding을 설정합니다.

두번째 값은 왼쪽, 오른쪽의 padding을 설정합니다.

 

 

  line-height  

<div class='my-div'>
  안녕하세요
</div>

.my-div {
  border : 1px solid blue;
  height : 200px;
  text-align : center;
  line-height : 200px;
}

 

line-height : 200px;

여기서는 line-height의 값을 div의 height 값과 똑같이 지정하여

문자열을 가운데(세로) 정렬하였습니다.

 

 

  align-items  

<div class='my-div'>
  안녕하세요
</div>

.my-div {
  border : 1px solid blue;
  height : 200px;
  display : flex;
  justify-content : center;
  align-items : center;
}

 

align-items : center;

가로 정렬과 마찬가지로

display 속성이 flex로 지정되면,

앞에서 소개한 방법으로는 세로 정렬이 어렵습니다.

따라서, 이 때는 위 예제처럼

align-items 속성을 center로 지정하여 세로 가운데 정렬을 해야합니다.

 

 

---

 

<div> 안의 문자열을

가로/세로 방향으로 가운데 정렬하는 방법을 알아보았습니다.