How do I 센터 UL&gt 맞추십시오 수펑

데릭쉐퍼드와 중심 맞추십시오 수평 메뉴.

39, ve i& 했다 '/' 블록 '/', '등 다양한 솔루션을 함께 인라인 블록 센터 맞추십시오.' 등, 하지만 haven& # 39, t 성공했습니다.

이것은 내 코드:

<div class="topmenu-design">
    <!-- Top menu content: START -->
    <ul id="topmenu firstlevel">                                                                                       
      <li class="firstli" id="node_id_64"><div><a href="#"><span>Om kampanjen</span></a></div></li>
      <li id="node_id_65"><div><a href="#"><span>Fakta om inneklima</span></a></div></li>
      <li class="lastli" id="node_id_66"><div><a href="#"><span>Statistikk</span></a></div></li>
    </ul>
    <!-- Top menu content: END -->
</div>
  • 업데이트 *

I know how to center 'ul' 맞춤 div 내에 ''. # 39 을 사용하여 수행할 수 있는 Sarfraz& 제안이다. 하지만 여전히 목록 항목을 하던 내 왼쪽 'ul'.

이를 위해 Javascript 필요합니까?

Saurav Rastogi
편집된 질문1일 12월 2016 в 3:48
프로그래밍
xhtml css menuitem
19일 5월 2010 в 12:21
8 파운드
질문에 대한 의견 (1)
해결책

Http://pmob.co.uk/pob/centred-float.htm 에서:

기본적으로 &gt 전제로 한 쉽고, 그냥 部门从 비트리스 부동 소수점 왼쪽에 있는 래퍼 하던 다음 왼쪽으로 상대치, 큰 화면 밖에서 너버 위치: 왼쪽 50% 였다. 그런 다음 네스트된 내부 요소가 반전됩니다 및 상대 위치를 + 50% 가 적용된다. 이 요소는 죽은입니다 중앙에 배치하고 효과가 있습니다. 그 흐름을 유지보수합니다 상대치 포지셔닝도 흐름 및 다른 내용을 있습니다.

코드

<! - begin 스니핏: js 숨기십시오: &gt 거짓값 -;

<div id="buttons">
    <ul>
        <li><a href="#">Button 1</a></li>
        <li><a href="#">Button 2's a bit longer</a></li>
        <li><a href="#">Butt 3</a></li>
        <li><a href="#">Button 4</a></li>
    </ul>
</div>
#buttons{
    float:right;
    position:relative;
    left:-50%;
    text-align:left;
}
#buttons ul{
    list-style:none;
    position:relative;
    left:50%;
}

#buttons li{float:left;position:relative;}/* ie needs position:relative here*/

#buttons a{
    text-decoration:none;
    margin:10px;
    background:red;
    float:left;
    border:2px outset blue;
    color:#fff;
    padding:2px 5px;
    text-align:center;
    white-space:nowrap;
}
#buttons a:hover{ border:2px inset blue;color:red;background:#f2f2f2;}
#content{overflow:hidden}/* hide horizontal scrollbar*/

끝 - &lt 스니핏 >;!

Robin
편집된 답변6일 1월 2015 в 10:18
해설 (10)

이 방법은 나여야지 만약 제가 질문을 잘못 해석하여 haven& # 39, t, 시도해 볼 수 있습니다.

<! - begin 스니핏: js 숨기십시오: &gt 거짓값 -;

    div#centerDiv {
        width: 100%;
        text-align: center;
        border: 1px solid red;
    }
    ul.centerUL {
        margin: 2px auto;
        line-height: 1.4;
        padding-left: 0;
    }
    .centerUL li {
        display: inline;
        text-align: center;
    }
<div id="centerDiv">
    <ul class="centerUL">
        <li><a href="http://www.amazon.com">Amazon 1</a>  </li>
        <li><a href="http://www.amazon.com">Amazon 2</a>  </li>
        <li><a href="http://www.amazon.com">Amazon 3</a></li>
    </ul>
</div>

끝 - &lt 스니핏 >;!

Robusto
편집된 답변25일 4월 2016 в 2:02
해설 (8)

Css3 함께 플렉상자. 단순해졌습니다.

ul {
  display: flex;
  justify-content: center;
}

ul li {
  padding: 0 8px;
}
fifi finance
편집된 답변17일 4월 2016 в 3:10
해설 (8)

이것은 가장 간단한 방법은 찾았다. 내가 사용하면 html. 이제 막 패딩 있지만브라우저에 재설정하려면 설정값으로.

<! - begin 스니핏: js 숨기십시오: &gt 거짓값 -;

ul {
  text-align: center;
  padding: 0;
}
li {
  display: inline-block;
}
<div class="topmenu-design">

  <ul id="topmenu firstlevel">
    <li class="firstli" id="node_id_64">
      <div><a href="#"><span>Om kampanjen</span></a>
      </div>
    </li>
    <li id="node_id_65">
      <div><a href="#"><span>Fakta om inneklima</span></a>
      </div>
    </li>
    <li class="lastli" id="node_id_66">
      <div><a href="#"><span>Statistikk</span></a>
      </div>
    </li>
  </ul>

</div>

끝 - &lt 스니핏 >;!

해설 (0)

39 의 here& 믿을 수 있는 방법을 어떻게 할 수 있는 아주 좋은 기사를 없이 hacks 및 전체 크로스 브라우저 지원. Works for me.

해설 (1)

데모 - http://codepen.io/grantex/pen/InLmJ

<div class="navigation">
    <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
        <li><a href="">Menu</a></li>
        <li><a href="">Others</a></li>
    </ul>
</div>

.navigation {
    max-width: 700px;
    margin: 0 auto;
}
.navigation ul {
    list-style: none;
    display: table;
    width: 100%;
}
.navigation ul li {
    display: table-cell;
    text-align: center;
}
.navigation ul li a {
    padding: 5px 10px;
    width: 100%;
}

Omg 너무 합성법.

해설 (0)

Do it like this:

   <div id="footer">
        <ul>
            <li><a href="/1.html">Link 1</a></li>
            <li><a href="/2.html">Link 2</a></li>
            <li><a href="/3.html">Link 3</a></li>
            <li><a href="/4.html">Link 4</a></li>
            <li><a href="/5.html">Link 5</a></li>
        </ul>
   </div>

및 CSS.

#footer {
    background-color:#ccc;
    height:39px;
    line-height:36px;
    margin:0 auto;
    text-align:center;
    width:950px;
}

#footer ul li {
    display:inline;
    font-family:Arial,sans-serif;
    font-size:1em;
    padding:0 2px;
    text-decoration:none;
}
해설 (1)

39, ve been 대해 이 같은 어려움을 겪고 있어, 많은 분들이 I& 귈이예요. 결국 이 솔루션을 포함하는 UL div 함께 할 것이다. 패딩, 너비 등에 대한 제안 UL 의 모든 두고 있지만 다음과 같은 효과를 가지고 있지 않았다.

, 여백 0 auto it& # 39 에 대한 모든 것을 포함하는 '에서' 이렇게 하면 어떤 사람들은 다른 사람들 덕분에, div 바란다.) 와 함께 하는 이 이미 다른 것을 제안했다.

.divNav
{
    width: 99%;
    text-align:center;
    margin:0 auto; 
}

.divNav ul
{ 
    display:inline-block; 
    list-style:none;
    zoom: 1;
}

.divNav ul li 
{
    float:left;
    margin-right: .8em;       
    padding: 0; 
}

.divNav a,  #divNav a:visited
{
    width: 7.5em;
    display: block; 
    border: 1px solid #000;
    border-bottom:none;
    padding: 5px; 
    background-color:#F90;
    text-decoration: none;
    color:#FFF;
    text-align: center;
    font-family:Verdana, Geneva, sans-serif;
    font-size:1em;
}
karthikr
편집된 답변20일 10월 2012 в 6:58
해설 (0)

이거 드세요.

div.topmenu-design ul
{
  display:block;
  width:600px; /* or whatever width value */
  margin:0px auto;
}
해설 (1)

일반적으로 운행에서어떠한 중심 검정 수준 요소 (like a ',' ul&gt &lt,) 는 ',' 재산이잖아 사용하여 자동 승리를 거두었다.

블록 내의 "텍스트 가운데 정렬; 사용할 레벨 요소 요소에 정렬하려면 텍스트 및 인라인 수준 '. 그래서 모두가 같은 일이.

ul {
    margin:auto;
}
ul li {
    text-align:center;
    list-style-position:inside; /* so that the bullet points are also centered */
}
ul li div {
    display:inline; /* so that the bullet points aren't above the content */
}

. 노력해야 합니다.

프린지 (fringe) 는 인터넷 비유하사 explorer6. 심지어 다른 대행사를 본사를 사용하지 않을 때 '&lt DOCTYPE>;!'. IE6 을 잘못 사용하여 정렬되고 에르메네츠 블록 단위로 '텍스트 정렬'. # 39 지원할 수 있도록 하고, 만일 you& 보았으매 IE6 (또는 ',' 사용하지 않으면 <! DOCTYPE&gt) 전체에 솔루션은.

div.topmenu-design {
    text-align:center;
}
div.topmenu-design ul {
    margin:auto;
}
div.topmenu-design ul li {
    text-align:center;
    list-style-position:inside; /* so that the bullet points are also centered */
}
div.topmenu-design ul li div {
    display:inline; /* so that the bullet points aren't above the content */
}

Id = ',' 로, 각주, 내가 생각하는 'id' 는 잘못된 표시됨과 &quot 토프메누 firstlevel&quot 속성용 can& # 39, t 공백이 포함되어 있습니다. ? 그러나 [w3c 권고안을 eventtest] [1] 이 [# 39, & # 39, name& id '속성' 로 유형] [2].

&gt. ID 와 NAME 토큰을 시작해야 합니다. &gt. 문자 ([z 는 za]) 과 5월 따라야 &gt. 원하는 만큼 의해 문자, 숫자 &gt. ([0-9]), 하이픈 (- &quot ";), 밑줄 &gt. (_&quot ";), 콜론 (:&quot ";), 및 기간 &gt. (.&quot ";).

[1]: http://www.w3.org/TR/html401/struct/global.html # 이데프 id [2]: http://www.w3.org/TR/html401/types.html # 유형 이름

해설 (0)

내가 사용한 인라인 블록이어야 표시 속성: 래퍼 구성되어 있는 솔루션을 사용하여 고정된 너비입니다. Ul 블록 안에 있는 인라인 블록 전시. 이를 사용하여 ul 그냥 시행하십시오 너비의 실제 컨텐츠! 마지막으로 승리를 거두었다. 자동차, 이 가운데 인라인 블록 0 =)

/*ul wrapper*/
.gallery_wrapper{
        width:          958px;
        margin:         0 auto;
  }
/*ul list*/
ul.gallery_carrousel{
        display:        inline-block;
        margin:         0 auto;
}
.contenido_secundario li{
        float:          left;
}
해설 (0)

39 의 @robusto& 뭐하러요 I was trying to do, I 제안하세요 가장 간단한 해결책은 바로 사용할 수 있습니다. I was trying to 같은 일을 할 수 있는 이미지 갤러리 비순서 목록. I made a fool) 를 중심으로 it 와 js 해야했다. Feel free to a href = &quot, http://jsfiddle.net/xanderoid/6wCHZ&quot, it, /a&gt here.&lt 시도하시겠습니까 &gt <;;

[it 설정되었습니다 robusto& 사용하여 # 39 의 샘플 코드] &lt br>; HTML:&lt br>;


<div id="centerDiv">
    <ul class="centerUL">
        <li><a href="http://www.amazon.com">
Dan Neely
편집된 답변2일 9월 2014 в 12:11
해설 (0)
 
ul{margin-left:33%}

제대로 된 근사화를 켜짐이 대량량 스크린합니다 있다. 하지만 그 실력이 좋은 더러운 수리입니다.

해설 (0)
div {
     text-align: center;
}
div ul {
     display: inline-table;
}

ul 등 문제가 발생한 인라인 테이블 수정합니다. 내가 상위입니다 div 정렬하려면 사용되는 텍스트 중심. 심지어 다른 언어로 (번역, 다른 너버) 이 방식으로 잘 어울려

해설 (0)

내가 사용하는 엔드입니다 코드를 포함한다. (대체 솔루션)

    $(document).ready(function() { 
       var margin = $(".topmenu-design").width()-$("#topmenu").width();
       $("#topmenu").css('margin-left',margin/2);
    });
해설 (0)
.topmenu-design
{
    display: inline-table;
}

모든!

Antonio
편집된 답변27일 8월 2014 в 4:54
해설 (0)