Span 태그 수직 / 수평 정렬하는 3가지 방법

span 태그는 inline 요소로 그룹화를 하거나 주로 텍스트에 스타일을 줄때 많이 사용합니다.

div 태그내에 있는 span 태그 수직/수평 정렬하는 3가지 방법에 대해서 알아보도록 하겠습니다.

 

1. Flex 이용

아래 속성들을 div에 적용하면 내부 요소들이 수직 / 수평 정렬 할 수 있습니다.

• display: flex;
• justify-content: center; // 수평
• align-items: center; // 수직

<div class="ex1">
  <span>Hello Superman</span>
</div>

.ex1 {
  display: flex;
  justify-content: center;
  align-items: center;
}

 

2. height, line-height 이용

div 요소 height 적용하고, 내부 span 태그에 div 적용한 height 만큼 line-height 속성을 지정해줍니다.

<div class="ex2">
  <span>Hello Batman</span>
</div>

.ex2 {
  height: 100px;
}

.ex2 span {
  line-height: 100px;
  text-align: center;
}

 

3. display: table 이용하기

div 속성에 display: table 적용하고

span 태그에 table-cell를 적용후 vertical-align, text-align 속성을 적용하면 가운데 정렬이 가능합니다.

<div class="ex3">
  <span>Hello Pororo</span>
</div>

.ex2 {
  display: table;
}

.ex2 span {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}