<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;}
-일단 이와같이 높이는 50px 짜리 <ul>
css 참쉽죠잉^^?;
ul{height:50px; width:100%; position:relative; list-style:none;}
-일단 이와같이 높이는 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>에서 가운데로 정렬이됩니다.그러면 균등한 간격으로 반응하여 정렬이 되죠
-네 그렇습니다 이와같습니다..ㅇㅅㅇㅋ;; 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>에서 가운데로 정렬이됩니다.그러면 균등한 간격으로 반응하여 정렬이 되죠
css 참쉽죠잉^^?;
댓글 10개
12년 전
그냥 li 에 text-align:center 주면 되잖아요?
12년 전
흠..그런가요?ㅋ
그건 text의 경우만 해당되죠ㅇㅅㅇ;
저 형태에서 li에 text-align:center를 주고 a에는 아무것도 주지말아보시던가요ㅎ;;
그건 text의 경우만 해당되죠ㅇㅅㅇ;
저 형태에서 li에 text-align:center를 주고 a에는 아무것도 주지말아보시던가요ㅎ;;
lainfox
12년 전
text 경우만은 아니고 inline 속성도 적용이 됩니다
12년 전
inlinde속성을 이용할려면 저구문에서 포지션을 지워줘야됩니다..ㅇㅅㅇ
신현종실장
12년 전
ie 에서 어찌 될까요?
실제로 ie 에서는 지운아빠님? 말 처럼 된적이 있슴다.
근데 최근에 div align=center 를 하면 텍스트 정렬까지도 중앙정렬 되는 경우도 있다능...
많은 테스트 와 정보 주시는 두분 땡큐~
실제로 ie 에서는 지운아빠님? 말 처럼 된적이 있슴다.
근데 최근에 div align=center 를 하면 텍스트 정렬까지도 중앙정렬 되는 경우도 있다능...
많은 테스트 와 정보 주시는 두분 땡큐~
cshop2
12년 전
지운엄마 말씀대로 그냥 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 까지 중앙정렬될 일이 없죠.
(li 에 주지말고 a 에다 주면되요.)
그리고 신실장님 말씀처럼 div 에 center 를 주는게 아니라 그냥 a tag 에만 center 를 주면 됩니다.
div align=center ㄴ ㄴ
요렇게.
.center { text-align: center; }
<a class="center" href="#">center</a>
css 충돌이 나지 않는 이상 다른 element 까지 중앙정렬될 일이 없죠.
신현종실장
12년 전
ㅎㅎ 명쾌한 정의를 내려준건가요?ㅠㅠ
12년 전
그러니깐 전 <a> 속성만을 정렬시키는걸 정의낸겁니다..ㅇㅅㅇ;;
12년 전
저는 가끔가다 메뉴 버튼들을 a 태그에 넣을 때 텍스트 길이가 짧으면 마우스 포인터 이동이 어렵게 되서 옛날엔 td, 지금은 span에 inline-block 속성을 주거나 div에 width를 줘서 크기를 고정한 다음 onClick이벤트를 이용하는 경우가 있었습니다.
li 요소를 정렬하는 방법은 여러가지가 있으니 그건 개발자 하기 나름인거 같고 a 태그 폭을 고정한 상태에서 택스를 정렬하는 방식에는 좋은 방법으로 보여집니다.
li 요소를 정렬하는 방법은 여러가지가 있으니 그건 개발자 하기 나름인거 같고 a 태그 폭을 고정한 상태에서 택스를 정렬하는 방식에는 좋은 방법으로 보여집니다.
돼지코구뇽
12년 전
저도 걍 100% 때리고 하위에 퍼센트로 넓이조절길이를 주는데 움 비슷하네요 굿팁!
게시판 목록
프로그램
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 6230 |
senseme
|
12년 전 | 1057 | |
| 6229 |
senseme
|
12년 전 | 1077 | |
| 6228 | 12년 전 | 4441 | ||
| 6227 |
senseme
|
12년 전 | 1496 | |
| 6226 |
senseme
|
12년 전 | 1644 | |
| 6225 | 12년 전 | 5499 | ||
| 6224 | 12년 전 | 3270 | ||
| 6223 |
kiplayer
|
12년 전 | 2140 | |
| 6222 | 12년 전 | 1301 | ||
| 6221 | 12년 전 | 3492 | ||
| 6220 | 12년 전 | 2516 | ||
| 6219 | 12년 전 | 2228 | ||
| 6218 |
senseme
|
12년 전 | 1842 | |
| 6217 |
senseme
|
12년 전 | 1532 | |
| 6216 |
senseme
|
12년 전 | 1529 | |
| 6215 |
senseme
|
12년 전 | 1283 | |
| 6214 | 12년 전 | 2397 | ||
| 6213 |
senseme
|
12년 전 | 1670 | |
| 6212 |
senseme
|
12년 전 | 1345 | |
| 6211 |
senseme
|
12년 전 | 2434 | |
| 6210 |
senseme
|
12년 전 | 1616 | |
| 6209 | 12년 전 | 2219 | ||
| 6208 | 12년 전 | 3445 | ||
| 6207 | 12년 전 | 1226 | ||
| 6206 |
senseme
|
12년 전 | 2197 | |
| 6205 | 12년 전 | 1040 | ||
| 6204 |
kiplayer
|
12년 전 | 1528 | |
| 6203 |
senseme
|
12년 전 | 2124 | |
| 6202 |
senseme
|
12년 전 | 1753 | |
| 6201 |
senseme
|
12년 전 | 4568 | |
| 6200 |
senseme
|
12년 전 | 2665 | |
| 6199 |
senseme
|
12년 전 | 2829 | |
| 6198 |
senseme
|
12년 전 | 1235 | |
| 6197 |
senseme
|
12년 전 | 8554 | |
| 6196 |
senseme
|
12년 전 | 3342 | |
| 6195 | 12년 전 | 1434 | ||
| 6194 |
 스위치79 |
12년 전 | 1291 | |
| 6193 |
senseme
|
12년 전 | 2694 | |
| 6192 |
senseme
|
12년 전 | 5365 | |
| 6191 |
senseme
|
12년 전 | 3417 | |
| 6190 | 12년 전 | 1343 | ||
| 6189 | 12년 전 | 13500 | ||
| 6188 |
웹디자인되고파
|
12년 전 | 1207 | |
| 6187 | 12년 전 | 625 | ||
| 6186 | 12년 전 | 3935 | ||
| 6185 | 12년 전 | 1472 | ||
| 6184 | 12년 전 | 9383 | ||
| 6183 | 12년 전 | 796 | ||
| 6182 |
senseme
|
12년 전 | 1239 | |
| 6181 |
senseme
|
12년 전 | 3223 | |
| 6180 |
senseme
|
12년 전 | 854 | |
| 6179 |
senseme
|
12년 전 | 1767 | |
| 6178 | 12년 전 | 3632 | ||
| 6177 | 12년 전 | 1064 | ||
| 6176 | 12년 전 | 956 | ||
| 6175 |
senseme
|
12년 전 | 5301 | |
| 6174 |
senseme
|
12년 전 | 1428 | |
| 6173 |
senseme
|
12년 전 | 752 | |
| 6172 |
senseme
|
12년 전 | 2742 | |
| 6171 |
senseme
|
12년 전 | 2487 | |
| 6170 |
senseme
|
12년 전 | 1504 | |
| 6169 |
senseme
|
12년 전 | 2929 | |
| 6168 |
senseme
|
12년 전 | 6535 | |
| 6167 | 12년 전 | 2138 | ||
| 6166 | 12년 전 | 747 | ||
| 6165 |
페이지팩트
|
12년 전 | 1904 | |
| 6164 |
네오soft
|
12년 전 | 1857 | |
| 6163 |
 엘남매아빠 |
12년 전 | 2606 | |
| 6162 | 12년 전 | 590 | ||
| 6161 |
엘남매아빠 |
12년 전 | 1692 | |
| 6160 | 12년 전 | 768 | ||
| 6159 | 12년 전 | 1777 | ||
| 6158 |
스위치79 |
12년 전 | 2682 | |
| 6157 |
sa2pan
|
12년 전 | 1244 | |
| 6156 | 12년 전 | 3892 | ||
| 6155 | 12년 전 | 9965 | ||
| 6154 | 12년 전 | 1124 | ||
| 6153 | 12년 전 | 2454 | ||
| 6152 |
생각보다몸이앞서다
|
12년 전 | 2125 | |
| 6151 | 12년 전 | 2975 | ||
| 6150 |
kiplayer
|
12년 전 | 6006 | |
| 6149 |
스위치79 |
12년 전 | 2647 | |
| 6148 | 12년 전 | 2970 | ||
| 6147 |
hwang007
|
12년 전 | 953 | |
| 6146 |
aqqasdf
|
12년 전 | 770 | |
| 6145 | 12년 전 | 1862 | ||
| 6144 | 12년 전 | 5879 | ||
| 6143 |
smwkd
|
12년 전 | 1463 | |
| 6142 | 12년 전 | 4702 | ||
| 6141 | 12년 전 | 929 | ||
| 6140 | 12년 전 | 4096 | ||
| 6139 | 12년 전 | 1241 | ||
| 6138 | 12년 전 | 1097 | ||
| 6137 |
SugarSkull
|
12년 전 | 1681 | |
| 6136 | 12년 전 | 1310 | ||
| 6135 |
한번잘해보자
|
12년 전 | 562 | |
| 6134 |
프리랜서개발자
|
12년 전 | 539 | |
| 6133 |
basaria
|
12년 전 | 20444 | |
| 6132 | 12년 전 | 507 | ||
| 6131 | 12년 전 | 1085 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기