Bagaimana cara pusat menyelaraskan horisontal <UL> menu?

Aku perlu ke pusat align horizontal menu. I've mencoba berbagai solusi, termasuk campuran dari inline-block / block / pusat-align dll., tapi belum't berhasil.

Berikut ini adalah 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>

UPDATE

Aku tahu bagaimana untuk pusat menyelaraskan ul dalam div. Yang dapat dicapai dengan menggunakan Sarfraz's saran. Tapi daftar barang-barang yang masih melayang kiri di dalam ul.

Apakah saya membutuhkan Javascript untuk mencapai hal ini?

Saurav Rastogi
Pertanyaan edit 1 Desember 2016 в 3:48
Pemrograman
xhtml css menuitem
19 Mei 2010 в 12:21
14 tayangan
Mengomentari pertanyaan (1)
Larutan

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

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

Kode

<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*/
Robin
Jawaban edit 6 Januari 2015 в 10:18
Komentar (10)

Ini bekerja untuk saya. Jika aku belum't disalahartikan pertanyaan anda, anda bisa 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>  </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>
Robusto
Jawaban edit 25 April 2016 в 2:02
Komentar (8)

Dengan CSS3 flexbox. Sederhana.

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

ul li {
  padding: 0 8px;
}
fifi finance
Jawaban edit 17 April 2016 в 3:10
Komentar (8)

Ini adalah cara paling sederhana yang saya temukan. Saya menggunakan html anda. Padding adalah untuk me-reset browser default.

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>
Komentar (0)

Berikut ini's sebuah artikel yang baik tentang cara untuk melakukannya cukup rock-solid tanpa hacks dan penuh dukungan cross-browser. Bekerja untuk saya:

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

Komentar (1)

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

Komentar (0)

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;
}
Komentar (1)

Seperti banyak dari anda, saya've telah berjuang dengan ini untuk sementara. Solusi yang pada akhirnya harus dilakukan dengan div mengandung UL. Semua saran pada mengubah bantalan, lebar, dll. dari UL tidak memiliki efek, tetapi setelah melakukannya.

It's semua tentang margin:0 auto; pada yang mengandung div. Saya harap ini membantu beberapa orang, dan terima kasih untuk semua orang yang sudah menyarankan hal ini di 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;
}
karthikr
Jawaban edit 20 Oktober 2012 в 6:58
Komentar (0)

Coba ini:

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

Pada umumnya jalan ke pusat hitam tingkat elemen (seperti <ul>) adalah menggunakan margin:auto; properti.

Untuk menyelaraskan teks dan inline elemen-elemen tingkat blok elemen tingkat penggunaan text-align:center;. Jadi semua 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.

Pinggiran kasus Internet Explorer6... atau bahkan lain IEs bila tidak menggunakan <!DOCTYPE>. IE6 salah sejalan blok tingkat elemnts menggunakan text-align. Jadi jika anda'kembali mencari untuk mendukung IE6 (atau tidak menggunakan <!DOCTYPE>) anda solusi lengkap...

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 sebagai sebuah id atribut dapat't mengandung spasi... ? Memang rekomendasi w3c mendefinisikan id atribut sebagai 'nama' tipe...

ID dan NAMA token harus dimulai dengan surat ([A-Za-z]) dan dapat diikuti oleh setiap jumlah huruf, digit ([0-9]), tanda hubung ("-"), garis bawah (&_"), titik dua (: ":"), dan periode (".").

Komentar (0)

Saya menggunakan display:inline-block properti: larutan yang terdiri dalam menggunakan bungkus dengan lebar tetap. Di dalam, ul blok dengan inline-block untuk tampilan. Menggunakan ini, ul hanya mengambil lebar untuk real konten! dan akhirnya margin: 0 auto, untuk pusat ini inline-block =)

/*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;
}
Komentar (0)

@Robusto's solusi yang paling sederhana untuk apa yang saya coba lakukan, saya sarankan anda menggunakan itu. Saya mencoba untuk melakukan hal yang sama untuk gambar dalam unordered list untuk membuat sebuah galeri... saya membuat js fiddle untuk main-main dengan hal itu. Merasa bebas untuk coba di sini.

[itu diatur menggunakan robusto's contoh kode]
HTML:


<div id="centerDiv">
    <ul class="centerUL">
        <li><a href="http://www.amazon.com">
Dan Neely
Jawaban edit 2 September 2014 в 12:11
Komentar (0)
 
ul{margin-left:33%}

Adalah layak pendekatan pada layar besar. Yang tidak baik, tapi yang baik kotor memperbaiki.

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

ul sebagai inline-table perbaikan dengan masalah. Aku digunakan orang tua div untuk menyelaraskan teks ke pusat. cara ini terlihat baik bahkan dalam bahasa-bahasa lain (terjemahan, lebar yang berbeda)

Komentar (0)

saya menggunakan kode jquery ini. (Alternatif solusi)

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

Itu semua!

Antonio
Jawaban edit 27 Agustus 2014 в 4:54
Komentar (0)