웹표준,웹접근성(html, html5, css, css3, javascript, jQuery, jQueryMobile, snecha, senchaTouch, php, mobileWebApp)

ul, li 의 가운데 정렬 본문

css

ul, li 의 가운데 정렬

jokack01 2012. 5. 4. 08:41

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<style>
#p_number { position:relative; width:656px; background:#00FFFF; clear:both; margin-top:20px; height:20px;  text-align:center; }

/*
#p_number ul { list-style-type:none;text-align:center;clear:both;}
#p_number ul li {  margin:0px 5px 0px 5px;display:inline; }
*/
#p_number ul { list-style-type:none;}
#p_number ul li {margin:0px 5px 0px 5px; display:inline}


/*
#p_number ul li img { margin:3px 0px 0px 0px; }
#p_number ul li a {color:#3E3E3E}
#p_number ul li a:hover,
#p_number ul li a.selected { color:#CDB01A }
#p_number ul li a.s { font-weight:bold;color:#CDB01A}/*선택된 페이지 넘버
*/

 #paging{position:relative; width:650px; clear:both; text-align:center; }
 .paging { text-align:center;  list-style:none;}
 
 .paging ul{list-style-type:none;}
 .paging li a{display:block; width:100%; height:100%; text-decoration:none; color:#fff;}
 .paging li { width:22px; height:22px; text-align:center; line-height:22px; list-style:none; display:inline; }

</style>
<body>

 <!-- 페이지 넘버 시작-->
    <div id="p_number">
        <ul>
          <li> <img src="../img/btn_pp_off.gif" alt="최신페이지" onClick=""   /></a></li>
          <li> <img src="../img/btn_pre_off.gif" alt="이전페이지"  onClick="" /></a></li>
          <li><a class="s">1</a> | <a  href="#"  >2</a> | <a  href="#"  >3</a> | <a  href="#"  >4</a></li>
          <li> <img src="../img/btn_next_off.gif" alt="다음페이지" onClick="" /> </li>
          <li> <img src="../img/btn_nn_off.gif" alt="처음페이지"  onClick="" /> </li>
        </ul>
    </div>
    <!-- 페이지 넘버 종료-->
 
    <!-- 페이징 시작 -->
    <div id="paging">
        <ul class="paging" >
            <li class="off"><img src="/img/bt/arrow_d_prev.gif" border="0" ></li>
            <li class="off"><img src="/img/bt/arrow_prev.gif" border="0" ></li>
            <li class="on">asdf></li>
            <li class="on">adf</li>
            <li class="on">adf</li>
            <li class="on">adf</li>
            <li class="off"><img src="/img/bt/arrow_next.gif" border="0" ></li>
            <li class="off"><img src="/img/bt/arrow_d_next.gif" border="0" ></li>
        </ul>
    </div>
    <!-- 페이징 끝 -->
</body>
</html>

display:block; 의 정렬은 float!!

inline 의 요소들은 text-align 속성으로 정렬 시켜야 한다.

 

 #paging{position:relative; width:650px; margin:0 auto; clear:both; text-align:center; }
 .paging_btn_wrap{position:relative; width:600px; margin:0 auto; clear:both; text-align:center;}
 .paging {position:relative; display:inline-block; text-align:center;  list-style:none;}
 
 /*.paging ul{list-style:none; display:inline-block;}*/
 .paging li a{ width:100%; height:100%; text-decoration:none; color:#fff;}
 .paging li { width:22px; height:22px; text-align:center; line-height:22px; list-style:none; display:inline; }
 .off{background:#c3c3c3; vertical-align:middle; text-align:center; margin-right:5px;  }
 .on{background:#8ddb72; vertical-align:middle; text-align:center; margin-right:5px; }

<!--[if IE]>
<style>
.paging {position:relative; display:inline; text-align:center;  list-style:none;}
</style>
<![endif]-->



 

'css' 카테고리의 다른 글

nth-child 몇 번째 자식요소  (0) 2011.11.11
float 제어  (0) 2011.11.11
플로팅 디자인의 특징  (0) 2011.11.11
플로팅된 자식요소를 감싸 안으려면?</  (0) 2011.11.11
화면 표시 모듈 - display  (0) 2011.11.11
'css' Related Articles more