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


148

가로 메뉴를 가운데 정렬해야합니다. / / 등
의 혼합을 포함한 다양한 솔루션을 시도했지만 성공하지 못했습니다.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>

최신 정보

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

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


각 LI의 텍스트를 중앙에 배치합니까 아니면 DIV 내의 UL을 중앙에 배치합니까?
Joop

답변:


130

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


9
링크 썩음을 방지하기 위해이 답변에 코드 나 컨텍스트를 추가해 주시겠습니까?
Nightfirecat

해결책은 훌륭하게 작동하며 오랜 시간이 지난 후에 죄송합니다.하지만 CSS 드롭 다운이 있으면 어떻게됩니까? 부모에서 overflow : hidden을 사용할 수 없습니다. 그러나 여기 여전히 homeafrika.com 과 같이 오버플로가 발생 합니다.
Samia Ruponti

실제로 해당 사이트에서 오버플로가 발생하지 않습니다. 오버플로가 필요한지 확실하지 않습니다. hidden; 어쨌든 가로 오버플로이기 때문에 항상 overflow-x를 시도 할 수 있습니다 : 숨김; 대신에. 실시간 지원을위한 webchat.freenode.net/?nick=oerflowono&channels=#websites .
reisio

1
솔루션은 메뉴를 멋지게 가운데에 배치하지만 호버에서 특정 고정 위치에 열어야하는 하위 메뉴가있는 position: relative경우 기본 메뉴 position:absolute의 하위 메뉴 동작이 변경되므로 파산 됩니다.
cweiske

1
@reisio #buttonsOP의 질문에 id 가 어디에 있습니까 ? 당신의 대답에서 그가 그것을 사용해야한다는 통지가 어디에 있습니까? 실제로 질문에 대답 하지 않고 일부 링크에서 주제를 벗어난 blah-blah를 인용하는 경우 어떻게 이것을 채택하고 투표를 잘할 수 있습니까?
trejder

90

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

    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>


2
@cweiske에 동의하십시오. 단순히 텍스트 정렬을 사용하여 : 포함하는 사업부에 센터는 나를 위해 문제 해결
김 스택

내부의 모든 텍스트가 제대로 표시되도록해야합니다.text-align: left;
Juan Mendes

사랑 스럽습니다! 그러나 ul의 왼쪽에는 기본 패딩이있어 메뉴가 가운데 오른쪽으로 이동합니다. padding-left를 사용하여 ul에서 기본 패딩을 제거해야합니다. 0;
반복 집시

1
허용 된 솔루션보다 완벽하게 더 나은 대답은 display : inline을 사용하는 것입니다. float를 사용하지 마십시오. 지나치게 복잡합니다. 통찰력 주셔서 감사합니다 @Robusto
Clain Dsilva

li의 텍스트 정렬 센터는 불필요
Aminah Nuraini

75

CSS3 flexbox와 함께. 단순한.

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

ul li {
  padding: 0 8px;
}

6
나는이 방법을 추천 할 것이다
caras

1
나도 선택한 답변 보다이 방법을 권장합니다.
mickburkejnr

나는 당신에게 맥주를 소유합니다!
Suyash Dixit

나는 콘텐츠를 정당화하기 전에 플렉스를 사용한 적이 없다고 말해야 할 것입니다. 탁월한 답변
Gman

Great Answer beero
Ilyas karim

20

이것이 내가 찾은 가장 간단한 방법입니다. 나는 당신의 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>



2

이 시도:

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

1
그것은 UL을 중심으로 작동합니다. 그러나 <LI>는 여전히 떠 있습니다. <LI>를 <UL> 내부에 배치하고 싶습니다. 가능합니까?
Steven

2

다음과 같이하십시오 :

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

2

많은 사람들처럼, 나는 이것으로 잠시 동안 고투 해 왔습니다. 이 솔루션은 궁극적으로 UL을 포함하는 div와 관련이있었습니다. UL의 패딩, 너비 등 변경에 대한 모든 제안은 효과가 없었지만 다음과 같은 효과가있었습니다.

margin:0 auto;포함하는 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;
}

2

데모-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%;
}

세상에 너무 깨끗해


1

일반적으로 (와 같은 <ul>) 블랙 레벨 요소를 중앙에 배치하는 방법 은 margin:auto;속성을 사용하는 것 입니다.

블록 레벨 요소 내에서 텍스트 및 인라인 레벨 요소를 정렬하려면을 사용하십시오 text-align:center;. 그래서 모두 같이 ...

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

... 작동해야합니다.

가장 큰 경우는 Internet Explorer6 또는을 사용하지 않는 다른 IE <!DOCTYPE>입니다. IE6가을 사용하여 블록 레벨 요소를 잘못 정렬 text-align합니다. 따라서 IE6 (또는 사용하지 않음)을 지원하려는 경우 <!DOCTYPE>전체 솔루션은 다음과 같습니다.

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="topmenu firstlevel"로서, id속성은 공백을 포함 할 수 없으므로 무효 라고 생각 합니다 ...? 실제로 w3c 권장 사항은id 속성을 'name'유형 으로 정의 합니다 ...

ID 및 NAME 토큰은 문자 ([A-Za-z])로 시작해야하며 뒤에 문자, 숫자 ([0-9]), 하이픈 ( "-"), 밑줄 ( "_")이 올 수 있습니다. , 콜론 ( ":") 및 마침표 ( ".")


1

display : inline-block 속성을 사용했습니다. 솔루션은 고정 너비의 래퍼를 사용합니다. 내부의 ul 블록은 인라인 블록으로 표시됩니다. 이것을 사용하여 ul은 실제 내용의 너비를 취합니다! 그리고 마지막으로 margin : 0 auto,이 인라인 블록을 가운데에 맞추기 =)

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

나는 이것을 위해 jquery 코드를 사용한다. (대체 솔루션)

    $(document).ready(function() { 
       var margin = $(".topmenu-design").width()-$("#topmenu").width();
       $("#topmenu").css('margin-left',margin/2);
    });

0
div {
     text-align: center;
}
div ul {
     display: inline-table;
}

ul 인라인 테이블로 문제를 해결합니다. 부모 div를 사용하여 텍스트를 가운데에 맞 춥니 다. 이런 식으로 다른 언어에서도 잘 보입니다 (번역, 너비가 다름)


0

@Robusto의 솔루션은 내가하려고했던 것 중 가장 간단했습니다. 사용하는 것이 좋습니다. 정렬되지 않은 목록의 이미지에 대해 갤러리를 만들기 위해 동일한 작업을 수행하려고했습니다 ... js 바이올린을 만들어 바보로 만들었습니다. 여기에서 자유롭게 시도하십시오.

[robusto의 샘플 코드를 사용하여 설정되었습니다]
HTML :

<div id="centerDiv">
    <ul class="centerUL">
        <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150>         </a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150"></a>&nbsp;&nbsp;</li>
        <li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150"></a></li>
    </ul>
</div>


CSS :

div#centerDiv {
    width: 700px;
    text-align: center;
    border: 1px solid red;
}
ul.centerUL {
    margin: 2px auto;
    line-height: 1.4;
}
.centerUL li {
    display: inline;
    text-align: center;
}

0
ul{margin-left:33%}

큰 화면에서 괜찮은 근사치입니다. 좋지는 않지만 더티 수정이 좋습니다.


당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.