div 가운데 정렬을 할줄 몰라서 도움좀 부탁드려요~
본문
위 그림 처럼 메인 메뉴쪽은 1000 사이즈로 서브 쪽은 100% 사이즈로 보여줄려고 하는대
밑에 서브 메뉴쪽을 메인 메뉴 가운데에 있는거처럼 가운데로 정렬 시키고 싶은대요
잘 안되내요 밑에 소스 원본인대 도와주시면 감사하겠습니다~
<!DOCTYPE html>
< meta http-equiv="X-UA-Compatible" content="IE=edge" />
< head>
< title> New Document </title>
< script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
< script type="text/javascript" Src="js/ex.js"></script>
< style type="text/css">
*{margin:0; padding:0;}
ul{margin:0; padding:0; list-style:none;}
.wrap{width:100%; margin:0 auto; position:relative;}
.menu{overflow:hidden;}
.menu{width:1000px; margin:0 auto; padding:0;}
.menu li{width:250px; height:30px; overflow:hidden; float:left; text-align:center; background-color:#98c93c;}
.menu li a{
display:block;
width:100%;
height:100%;
line-height:30px; /* li 높이 */
text-indent:0px; /* 글자 왼쪽 여백 */
font-weight:bold;
font-size: 12px;
color:#ffffff; /* 글자 색 */
text-decoration:none;}
.text{ position:absolute; width:100%; background-color:#a9da4e;}
.text ul{width:250px; float:left;}
.text ul li{text-align:center;}
.text a{
display:block;
width:100%;
height:100%;
line-height:30px; /* li 높이 */
text-indent:0px; /* 글자 왼쪽 여백 */
font-weight:bold;
font-size: 12px;
color:#ffffff; /* 글자 색 */
text-decoration:none;
}
a:hover{background-color:#547910;}
img{border:0;}
.contents{height:600px; background-color:#000000;}
< /style>
</head>
<body>
< div class="wrap">
<ul class="menu">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
<ul class="text">
<li>
<ul>
<li><a href="#">서브메뉴</a></li>
<li><a href="#">서브메뉴</a></li>
<li><a href="#">서브메뉴</a></li>
</ul>
</li>
<li>
<ul>
<li><a href="#">서브메뉴</a></li>
<li><a href="#">서브메뉴</a></li>
<li><a href="#">서브메뉴</a></li>
</ul>
</li>
<li>
<ul>
<li><a href="#">서브메뉴</a></li>
<li><a href="#">서브메뉴</a></li>
<li><a href="#">서브메뉴</a></li>
</ul>
</li>
<li>
<ul>
<li><a href="#">서브메뉴</a></li>
<li><a href="#">서브메뉴</a></li>
<li><a href="#">서브메뉴</a></li>
</ul>
</li>
</ul>
</div>
< /div>
< /body>
< /html>
답변 3
div 하나 더 만들어서 margin: 0 auto; style 주시고 묶어주시면 될것 같네요.
답변 주신거 감사합니다.
근대 어느 부분을 감싸서 만들어야 할까요 이것저것 해봤는대 잘 안되내요 ㅠ
일단 저 소스를 원형그대로 두고 원하시는 결과물을 얻으시려면,
현재 서브 메뉴를 감싸는 div를 하나 추가하시고
text클래스부분을 수정하시면 됩니다.
수정예..
.text_area { width: 100%; height: 100px; background-color:#a9da4e;}
.text{ width:1000px; margin: 0 auto;}
<div class="text_area">
<ul class="text">
.
.
.
</ul>
</div>
