ReSet ORIGINAL
[CSS] 브라우저 가로사이즈에 반응하여 css로 균등한 간격으로 정렬하기 목록
  • 글쓴이 : IN-BEST 작성일 : 13-07-02 02:38 조회 : 9,102
\\ Source Explanation
<ul>
<li><a></a></li>
<li><a ></a></li>
<li><a></a></li>
<li><a></a></li>
</ul>

ul{height:50px; width:100%; position:relative; list-style:none;}
Source Code

-일단 이와같이 높이는 50px 짜리 <ul>

li{position:relative; height:100%; width:25%; float:left;}

- 100(전체사이즈)분의 4(<li>갯수)는 25(<li> 1개의 사이즈)죠 그러므로 가로사이즈 역시 25%입니다^^;

a{background:#000; position:absolute; width:50px; height:100%; left:50%; top:0; margin-left:-25px;}

-높이와 가로가 50px 정사각형이 <a>속성을 갖고 가로사이즈에 맞춰서 균등한 간격으로 정렬이 됩니다^^;

 left:50% 는 <a>의 맨왼쪽을 중점으로 하여 <li>가로사이즈 25%의 가운데로 가게됩니다. 그리고 거기서<a>의 중점을 가운데로 맞춰줘야겠죠? 이미지 가로사이즈는 50px입니다 여기서 가운데는 몇px일까요? 그렇습니다 25px입니다!! 하하;
그부분이  margin-left:-25px; 가 되겠습니다.

이제 결론적으로 토탈해 설명하자면 <ul>의 100%가로사이즈에서 25%의<li>에서 가운데로 정렬이됩니다.그러면 균등한 간격으로 반응하여 정렬이 되죠


※ 그냥 li 에 text-align:center ??

그냥 text-align 을 center 로 주면 됩니다.

(li 에 주지말고 a 에다 주면되요.)

그리고  div 에 center 를 주는게 아니라 그냥 a tag 에만 center 를 주면 됩니다.

div align=center  ㄴ ㄴ

요렇게.

.center { text-align: center; }
<a class="center" href="#">center</a>

css 충돌이 나지 않는 이상 다른 element 까지 중앙정렬될 일이 없죠.
· 출처 : 그누보드 퍼블리셔 / 스아이 ++
0.00 (0명)
평가해주세요. 비회원 가능!