CSS 브라우저 가로사이즈에 반응하여 css로 균등한 간격으로 정렬하기
페이지 정보
작성자 IN-BEST 댓글 0건 조회 17,472회 작성일 13-07-02 02:38본문
-일단 이와같이 높이는 50px 짜리
-
li{position:relative; height:100%; width:25%; float:left;}
- 100(전체사이즈)분의 4(
- 갯수)는 25(
- 1개의 사이즈)죠 그러므로 가로사이즈 역시 25%입니다^^;
a{background:#000; position:absolute; width:50px; height:100%; left:50%; top:0; margin-left:-25px;}
-높이와 가로가 50px 정사각형이 속성을 갖고 가로사이즈에 맞춰서 균등한 간격으로 정렬이 됩니다^^;
left:50% 는 의 맨왼쪽을 중점으로 하여
- 가로사이즈 25%의 가운데로 가게됩니다. 그리고 거기서의 중점을 가운데로 맞춰줘야겠죠? 이미지 가로사이즈는 50px입니다 여기서 가운데는 몇px일까요? 그렇습니다 25px입니다!! 하하; 그부분이 margin-left:-25px; 가 되겠습니다. 이제 결론적으로 토탈해 설명하자면
- 의 100%가로사이즈에서 25%의
- 에서 가운데로 정렬이됩니다.그러면 균등한 간격으로 반응하여 정렬이 되죠 ※ 그냥 li 에 text-align:center ?? 그냥 text-align 을 center 로 주면 됩니다. (li 에 주지말고 a 에다 주면되요.) 그리고 div 에 center 를 주는게 아니라 그냥 a tag 에만 center 를 주면 됩니다. div align=center ㄴ ㄴ 요렇게. .center { text-align: center; } center css 충돌이 나지 않는 이상 다른 element 까지 중앙정렬될 일이 없죠.
- 가로사이즈 25%의 가운데로 가게됩니다. 그리고 거기서의 중점을 가운데로 맞춰줘야겠죠? 이미지 가로사이즈는 50px입니다 여기서 가운데는 몇px일까요? 그렇습니다 25px입니다!! 하하; 그부분이 margin-left:-25px; 가 되겠습니다. 이제 결론적으로 토탈해 설명하자면
양반은 물에 빠져도 개헤엄 안 치고, 선비는 얼어 죽어도 곁불 안 쬔다 !! 나는 나 ^^ 주접 떨지않고, 당당하게 살다 ... 간다 ~
댓글목록
등록된 댓글이 없습니다.
