Bagaimana cara pusat menyelaraskan menu <UL> horizontal?


148

Saya perlu memusatkan menyelaraskan menu horizontal.
Saya sudah mencoba berbagai solusi, termasuk campuran inline-block/ block/ center-aligndll., Tetapi belum berhasil.

Ini kode saya:

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

MEMPERBARUI

Saya tahu bagaimana cara menyelaraskan pusat di uldalam div. Itu bisa dicapai dengan menggunakan saran Sarfraz. Tetapi item daftar masih mengambang di dalam ul.

Apakah saya perlu Javascript untuk menyelesaikan ini?


Pusatkan teks di setiap LI atau pusatkan UL dalam DIV?
Joop

Jawaban:


130

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

Premisnya sederhana dan pada dasarnya hanya melibatkan pembungkus float tanpa lebar yang melayang ke kiri dan kemudian bergeser layar ke posisi lebar kiri: relatif; kiri: -50%. Berikutnya elemen dalam bersarang dibalik dan posisi relatif + 50% diterapkan. Ini memiliki efek menempatkan elemen mati di tengah. Posisi relatif mempertahankan aliran dan memungkinkan konten lain mengalir di bawahnya.

Kode

#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
Bisakah Anda menambahkan beberapa kode atau konteks ke jawaban ini untuk mencegah pembusukan tautan?
Nightfirecat

Solusinya bekerja dengan baik dan saya minta maaf untuk menanyakan hal ini setelah waktu yang lama, tetapi bagaimana jika saya memiliki drop down css? Saya tidak bisa menggunakan overflow: disembunyikan di induk. Tetapi masih akan meluap seperti di sini: homeafrika.com .
Samia Ruponti

Tidak benar-benar melihat ada luapan di situs itu. Saya tidak yakin Anda perlu overflow: disembunyikan; bit anyways, meskipun karena untuk overflow horisontal, Anda selalu dapat mencoba overflow-x: hidden; sebagai gantinya. webchat.freenode.net/?nick=oerflowono&channels=#website untuk bantuan waktu nyata.
reisio

1
Solusinya memusatkan menu dengan baik, tetapi jika Anda memiliki submenu yang seharusnya terbuka pada posisi tetap tertentu pada hover, Anda akan menemui ajal karena position: relativemenu utama mengubah perilaku position:absolutesub menu.
cweiske

1
@reisio Di mana ada #buttonsid dalam pertanyaan OP? Di mana ada pemberitahuan, dalam jawaban Anda, bahwa dia harus menggunakannya? Bagaimana ini bisa diterima dan terpilih sebagai jawaban, jika Anda sebenarnya tidak menjawab pertanyaan, hanya mengutip beberapa topik bla-bla dari beberapa tautan?
trejder

90

Ini bekerja untuk saya. Jika saya belum salah mengartikan pertanyaan Anda, Anda dapat mencobanya.

    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
setuju dengan @cweiske. Cukup menggunakan text-align: center di div yang berisi memecahkan masalah untuk saya
Kim Stacks

Anda hanya perlu memastikan teks di dalamnya mendapattext-align: left;
Juan Mendes

Ini indah! Tapi, ul memiliki padding default di sebelah kiri yang berarti menu didorong ke kanan tengah. Anda harus menghapus padding default dari ul dengan padding-left: 0;
Gipsi Iteratif

1
Benar-benar jawaban yang lebih baik daripada solusi yang diterima, gunakan tampilan: inline melakukan trik. jangan gunakan float, ini terlalu rumit. Terima kasih atas wawasan @Robusto
Clain Dsilva

pusat perataan teks di li tidak perlu
Aminah Nuraini

75

Dengan flexbox CSS3. Sederhana.

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

ul li {
  padding: 0 8px;
}

6
Saya pasti akan merekomendasikan metode ini
caras

1
Saya juga akan merekomendasikan metode ini pada jawaban yang dipilih.
mickburkejnr

Aku punya kamu bir!
Suyash Dixit

Saya harus mengatakan saya tidak pernah menggunakan flex sebelum keduanya tidak membenarkan konten. Jawaban luar biasa
Gman

Jawaban Hebat beero
Ilyas karim

20

Ini adalah cara paling sederhana yang saya temukan. Saya menggunakan html Anda. Padding hanya untuk mereset default browser.

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

Coba ini:

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

1
Itu berfungsi sebagai pusat UL. Tapi <LI> masih mengambang. Saya ingin <LI> dipusatkan di dalam <UL>. Apa itu mungkin?
Steven

2

Lakukan seperti ini :

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

Dan 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

Seperti banyak dari Anda, saya telah berjuang dengan ini untuk sementara waktu. Solusinya akhirnya harus dilakukan dengan div yang berisi UL. Semua saran tentang mengubah padding, lebar, dll. UL tidak berpengaruh, tetapi yang berikut tidak.

Ini semua tentang margin:0 auto;pada div yang mengandung. Saya harap ini membantu beberapa orang, dan terima kasih kepada semua orang yang sudah menyarankan ini dalam kombinasi dengan hal-hal lain.

.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

Demo - 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 jauh lebih bersih.


1

Secara umum cara memusatkan elemen tingkat hitam (seperti a <ul>) menggunakanmargin:auto; properti.

Untuk menyelaraskan elemen level teks dan inline dalam elemen level blok, gunakan text-align:center;. Jadi semuanya bersama-sama seperti ...

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

... harus bekerja.

Kasing tepi adalah Internet Explorer6 ... atau bahkan IE lain ketika tidak menggunakan a <!DOCTYPE>. IE6 salah menyelaraskan menggunakan tingkat blok elemnts text-align. Jadi jika Anda ingin mendukung IE6 (atau tidak menggunakan <!DOCTYPE>) solusi lengkap Anda adalah ...

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

Sebagai catatan kaki, saya pikir id="topmenu firstlevel"tidak valid karena idatribut tidak dapat berisi spasi ...? Memang rekomendasi W3C mendefinisikan yang idatribut sebagai tipe 'nama' ...

Token ID dan NAME harus dimulai dengan huruf ([A-Za-z]) dan dapat diikuti oleh sejumlah huruf, digit ([0-9]), tanda hubung ("-"), garis bawah ("_") , titik dua (":"), dan titik (".").


1

Saya menggunakan tampilan: properti inline-block: solusinya adalah menggunakan pembungkus dengan lebar tetap. Di dalam, blok ul dengan blok inline untuk tampilan. Menggunakan ini, ul hanya mengambil lebar untuk konten yang sebenarnya! dan akhirnya margin: 0 otomatis, untuk memusatkan inline-block = ini)

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

saya menggunakan kode jquery untuk ini. (Solusi alternatif)

    $(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 sebagai inline-table memperbaiki masalah. Saya menggunakan div induk untuk menyelaraskan teks ke pusat. cara ini terlihat bagus bahkan dalam bahasa lain (terjemahan, lebar berbeda)


0

Solusi @ Robusto adalah yang paling sederhana untuk apa yang saya coba lakukan, saya sarankan Anda menggunakannya. Saya mencoba melakukan hal yang sama untuk gambar dalam daftar tidak teratur untuk membuat galeri ... Saya membuat biola untuk bermain-main dengan itu. Jangan ragu untuk mencobanya di sini.

[disetel menggunakan kode sampel 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%}

Apakah perkiraan yang layak di layar lebar. Itu tidak baik, tetapi perbaikan kotor yang baik.


Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.