[css] 수평 <UL> 메뉴를 가운데 정렬하려면 어떻게합니까?

Program / 글쓴이

가로 메뉴를 가운데 정렬해야합니다. / / 등
의 혼합을 포함한 다양한 솔루션을 시도했지만 성공하지 못했습니다.inline-blockblockcenter-align

내 코드는 다음과 같습니다.

<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>

최신 정보

나는를 가운데 정렬하는 방법을 알고 ul내 div. 그것은 Sarfraz의 제안을 사용하여 달성 할 수 있습니다. 그러나 목록 항목은 여전히에 남아 있습니다 ul.

이 작업을 수행하려면 Javascript가 필요합니까?

답변

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

전제는 간단하며 기본적으로 너비가없는 플로트 래퍼가 포함되어 왼쪽으로 떠 다니고 화면에서 왼쪽 너비 위치로 이동합니다. 왼쪽 : -50 % 다음으로 중첩 된 내부 요소가 반전되고 + 50 %의 상대 위치가 적용됩니다. 이것은 요소를 중앙에 데드로 배치하는 효과가 있습니다. 상대 위치는 흐름을 유지하고 다른 내용이 아래로 흐를 수있게합니다.

암호

#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*/
<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>

스 니펫 확장

답변

이것은 나를 위해 작동합니다. 내가 당신의 질문을 잘못 해석하지 않았다면, 당신은 그것을 시도해 볼 수 있습니다.

    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>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com">Amazon 2</a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com">Amazon 3</a></li>
    </ul>
</div>

스 니펫 확장

답변

CSS3 flexbox와 함께. 단순한.

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

ul li {
  padding: 0 8px;
}

답변

이것이 내가 찾은 가장 간단한 방법입니다. 나는 당신의 HTML을 사용했습니다. 패딩은 브라우저 기본값을 재설정하는 것입니다.

ul {
  text-align: center;
  padding: 0;
}
li {
  display: inline-block;
}
<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>

스 니펫 확장

답변

다음은 해킹과 완벽한 크로스 브라우저 지원없이 매우 견고한 방법으로 수행하는 방법에 대한 좋은 기사입니다. 나를 위해 작동 :

-> http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support

답변

이 시도:

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

답변

다음과 같이하십시오 :

   <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;
}