水平方向の<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>

更新

ul内で中央揃えにする方法を知っていますdiv。これは、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 2012年

そのサイトで実際にオーバーフローが発生することはありません。オーバーフローが必要かどうかはわかりません。とにかく、ビットは水平オーバーフロー用なので、常にoverflow-x:hiddenを試すことができます。代わりに。 リアルタイムアシスタンスのためのwebchat.freenode.net/?nick=oerflowono&channels=#websites
reisio 2012年

1
解決策はメニューを適切に中央に配置しますが、ホバーの特定の固定位置で開く必要があるサブメニューがある場合position: relative、メインメニューのがposition:absoluteサブメニューのの動作を変更するため、運命にあります。
cweiske 2012

1
@reisio #buttonsOPの質問にidはどこにありますか?あなたの答えで、彼がそれを使わなければならないという通知がありますか?実際に質問に答え、リンクからトピック外の何とか何とか何とか引用するだけの場合、これをどのように受け入れてトップ投票で答えることができますか?
trejder 2013

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を使用する:含まれるdivの中央で問題が解決しました
Kim Stacks

内部のテキストが確実に取得されるようにする必要がありますtext-align: left;
Juan Mendes

これは素敵です!ただし、ulの左側にはデフォルトのパディングがあります。つまり、メニューは中央の右側に微調整されます。ulからデフォルトのパディングをpadding-left:0で削除する必要があります。
反復ジプシー

1
受け入れられているソリューションよりも完全に優れた答えであるdisplay:inlineを使用することでうまくいきます。過度に複雑なfloatは使用しないでください。洞察をありがとう@Robusto
Clain Dsilva

liの中央揃えは不要
アミナヌライニ16

75

CSS3フレックスボックス。シンプル。

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

ul li {
  padding: 0 8px;
}

6
私は間違いなくこの方法をお勧めします
2016

1
私も選択した答えよりもこの方法をお勧めします。
mickburkejnr 2016年

私はあなたにビールを持っています!
Suyash Dixit

コンテンツを正当化する前にflexを使用したことがないということを言わなければなりません。すばらしい答え
Gman

Great Answer beero
Ilyas karim 2016

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>の中央に配置します。出来ますか?
スティーブン

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属性を「名前」タイプとして定義しています...

IDトークンとNAMEトークンは文字([A-Za-z])で始まり、その後に任意の数の文字、数字([0-9])、ハイフン( "-")、アンダースコア( "_")を続けることができます、コロン( ":")、およびピリオド( "。")。


1

私はdisplay:inline-blockプロパティを使用しました。解決策は、固定幅のラッパーを使用することです。内部では、表示用のインラインブロックを持つulブロック。これを使用して、ulは実際のコンテンツの幅を取ります。そして最後にマージン: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 as inline-tableはwith問題を修正します。親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.