div 가운데 정렬을 할줄 몰라서 도움좀 부탁드려요~

div 가운데 정렬을 할줄 몰라서 도움좀 부탁드려요~

QA

div 가운데 정렬을 할줄 몰라서 도움좀 부탁드려요~

본문

3b3d71dca6081a3051b1763fd914f409_1421021067_4894.jpg 

위 그림 처럼 메인 메뉴쪽은 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> 

답변을 작성하시기 전에 로그인 해주세요.
전체 123,162 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT