[css] display를 이용한 가운데정렬

안녕하세요. 플입니다.

오늘은 가운데 정렬을 조금 다른 방법으로 진행해보겠습니다.

 

---

 1.  display

ul li{ display:inline-block; }

 

옆으로 나열하는 방법은 여러가지가 있는데요.

보통은 float:left를 사용하죠. 하지만 float:left를 사용하면

태블릿이나 모바일 사이즈에서 가운데 정렬을 하기 어려워집니다.

 

이럴때 display:inline-block;을 사용하면 text-align을 이용해 쉽게 가운데 정렬을 할 수 있습니다.

(정말 혁명적...)

 

inline-block은 inline속성과 block속성을 모두 가지고있는데

inline속성이라 각 태그들이 옆으로 나열되고, block속성도 있기 때문에 내부에서는 패딩속성이 잘 들어갑니다.

 

---

 2.  text-align

ul{ text-align:center; }

 

이제 전체에 text-align:center로 가운데 정렬을 해줍니다.

 

혁

명

적

!!

 

이만 줄이겠습니다.

 

---

그럼 이만.

총총.