간만에 공부하고 있습니다.
이번주가 앞으로 두달여간 유일하게 남는 시간일 것 같아서요..
요렇게 세개의 컬럼으로 된 레이아웃을 공부하는데요..
요게 지금 가운데 정렬입니다.
저번에 행님님하고 DreamT 님 덕분에
css 에서 margin:0 auto; 를 이용해서 가운데 하나의 컬럼을 가운데 정렬하는 방법을 배웠는데
요렇게 세개를 한번에 순서대로 가운데 정렬하려면 어떻게 해야하나요?
댓글 13개
높이가 100% 아니라면
-------------------------
<body style="text-align:center">
<div id="wrapper" style="margin:0px auto; width:1100px;">
<div class="left" style="float:left;width:80px"></div>
<div class="right" style="float:right;width:80px"></div>
<div class="center" style="margin:0px 85px"></div>
</div>
</body>
-----------------
다시보니 wrapper에 너비를 주는걸 깜빡했네요.. ㅋㅋ
-------------------------
<body style="text-align:center">
<div id="wrapper" style="margin:0px auto; width:1100px;">
<div class="left" style="float:left;width:80px"></div>
<div class="right" style="float:right;width:80px"></div>
<div class="center" style="margin:0px 85px"></div>
</div>
</body>
-----------------
다시보니 wrapper에 너비를 주는걸 깜빡했네요.. ㅋㅋ
종결자.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>제목입니다용~ ^-^ 에헷~!</title>
<style type="text/css">
* {margin:0; padding:0;} /* 이건 전체 엘리먼트의 마진과 패딩 0으로 만들기 */
#wrap {width:1090px; margin:0 auto;}
div.left {float:left; width:80px;}
div.center {float:left; width:930px;}
div.right {float:right; width:80px;}
</style>
</head>
<body>
<div id="wrap">
<div class="left">80px</div>
<div class="center">930px</div>
<div class="right">80px</div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko" xml:lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr" />
<title>제목입니다용~ ^-^ 에헷~!</title>
<style type="text/css">
* {margin:0; padding:0;} /* 이건 전체 엘리먼트의 마진과 패딩 0으로 만들기 */
#wrap {width:1090px; margin:0 auto;}
div.left {float:left; width:80px;}
div.center {float:left; width:930px;}
div.right {float:right; width:80px;}
</style>
</head>
<body>
<div id="wrap">
<div class="left">80px</div>
<div class="center">930px</div>
<div class="right">80px</div>
</div>
</body>
</html>
게시글 목록
| 번호 | 제목 |
|---|---|
| 1717629 | |
| 1717626 | |
| 1717625 | |
| 1717621 | |
| 1717619 | |
| 1717611 | |
| 1717610 | |
| 1717609 | |
| 1717607 | |
| 1717601 | |
| 1717598 | |
| 1717591 | |
| 1717590 | |
| 1717583 | |
| 1717575 | |
| 1717572 | |
| 1717568 | |
| 1717566 | |
| 1717549 | |
| 1717545 | |
| 1717533 | |
| 1717512 | |
| 1717511 | |
| 1717508 | |
| 1717495 | |
| 1717479 | |
| 1717473 | |
| 1717470 | |
| 1717463 | |
| 1717452 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기