dev/web

inline-block를 활용한 가운데 정렬

재삐신생 2014. 1. 13. 10:57
반응형

ul li를 한줄로 만들기위해


float:left를 자주 사용했는데


이제 웹환경이 많이 좋아졌으니

inline-block를 막 사용할 수 있다.


물론 약간의 hack

*zoom:1;

*display: inline;


따위는 적용


float:left인 li요소를 가진 부모 ul을 inline-block해도 가운데 정렬효과를 얻을 수 있으며

그냥 li요소에 inline-block를 해도 가운데 정렬효과를 얻을 수 있다.


<ul style="display:inline-block;">

<li style="float:left">item1</li>

</ul>



<ul>

<li style="display:inline-block;">item1</li>

</ul>



그냥 두가지 방법이 있다

반응형

'dev > web' 카테고리의 다른 글

팝업차단을 피하는 방법-네이버앱  (0) 2014.04.07
모바일웹 팝업띄움기 3가지 방법  (0) 2014.04.07
default width on mobile browser  (0) 2014.01.06
vertical-align의 이해  (0) 2013.12.19
디바이스별 사이트 뷰 체크  (0) 2013.12.09