Bagaimana cara pusat menyelaraskan menu <UL> horizontal?

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?

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>

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>

Dengan flexbox CSS3. Sederhana.

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

ul li {
  padding: 0 8px;
}

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>

Berikut ini adalah artikel yang bagus tentang cara melakukannya dengan cara yang sangat solid, tanpa peretasan dan dukungan lintas-browser penuh. Bekerja untuk saya:

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

Coba ini:

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

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

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

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.

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 (".").

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

saya menggunakan kode jquery untuk ini. (Solusi alternatif)

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

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)

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

ul{margin-left:33%}

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

.topmenu-design
{
    display: inline-table;
}

Itu saja!