Yatay <UL> menüsünü nasıl ortalayabilirim?

Yatay bir menüyü ortalamam gerekiyor. / / Vb.
Karışımı da dahil olmak üzere çeşitli çözümler denedim , ancak başarılı olamadım.inline-blockblockcenter-align

İşte benim kod:

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

GÜNCELLEME

Ben hizalama ortalamak biliyorum uliçinde div. Bu Sarfraz'ın önerisi ile gerçekleştirilebilir. Ancak liste öğeleri hala içinde bırakılıyor ul.

Bunu yapabilmek için Javascript'e ihtiyacım var mı?

Gönderen http://pmob.co.uk/pob/centred-float.htm :

Öncül basittir ve temel olarak sadece sola kayan ve daha sonra ekrandan sol genişlik konumuna kaydırılan genişliksiz bir şamandıra sargısını içerir: göreceli; sol: -50%. Daha sonra iç içe geçmiş iç eleman ters çevrilir ve% + 50'lik göreceli bir konum uygulanır. Bunun elemanı ölü olarak ortaya koyma etkisi vardır. Göreli konumlandırma akışı korur ve diğer içeriğin altına akmasına izin verir.

kod

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

Bu benim için çalışıyor. Sorunuzu yanlış anlamadıysam, bir deneyebilirsiniz.

    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>

CSS3 flexbox ile. Basit.

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

ul li {
  padding: 0 8px;
}

Bulduğum en basit yol bu. HTML'nizi kullandım. Dolgu yalnızca tarayıcı varsayılanlarını sıfırlamak içindir.

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>

İşte herhangi bir kesmek ve tam çapraz tarayıcı desteği olmadan, oldukça sağlam bir şekilde nasıl yapılacağı hakkında iyi bir makale. Benim için çalışıyor:

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

Bunu dene:

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

Şöyle yapın:

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

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

Birçoğunuz gibi, bir süredir bununla mücadele ediyorum. Çözüm nihayetinde UL içeren div ile ilgiliydi. UL'nin dolgu, genişlik vb. Değiştirilmesine ilişkin tüm önerilerin bir etkisi olmamıştır, ancak aşağıdakiler etkili olmuştur.

Her şey margin:0 auto;içeren div ile ilgili. Umarım bu bazı insanlara yardımcı olur ve bunu başka şeylerle birlikte öneren herkese teşekkürler.

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

Aman tanrım çok daha temiz.

Genel olarak, siyah düzeyli bir öğeyi (a gibi <ul>) ortalamanın yolunu söylemek margin:auto;özelliği kullanıyor .

Bir blok düzeyi öğesindeki metin ve satır içi düzey öğelerini hizalamak için kullanın text-align:center;. Yani hep birlikte ...

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

... çalışmalı.

Saçak durumda Internet Explorer6 ... ve hatta kullanılmayan diğer IE'ler <!DOCTYPE>. IE6, blok düzeyi öğelerini kullanarak yanlış hizalar text-align. Yani IE6'yı desteklemek istiyorsanız (veya a kullanmıyorsanız <!DOCTYPE>) tam çözümünüz ...

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

Dipnot olarak, id="topmenu firstlevel"bir idözellik boşluk içeremediğinden geçersiz olduğunu düşünüyorum ...? Nitekim W3C öneri tanımlayanid bir şekilde özelliğini 'name' tipi ...

Kimlik ve NAME belirteçleri bir harfle ([A-Za-z]) başlamalı ve ardından herhangi bir sayıda harf, rakam ([0-9]), kısa çizgi ("-"), alt çizgi ("_") gelmelidir. , iki nokta üst üste (":") ve nokta (".") içerir.

Display: inline-block özelliğini kullandım: çözüm, sabit genişlikte bir sargı kullanımından oluşuyor. İçeride, görüntüleme için satır içi bloğa sahip ul bloğu. Bunu kullanarak, ul sadece gerçek içeriğin genişliğini alır! ve son olarak kenar boşluğu: 0 otomatik, bu satır içi bloğu ortalamak =)

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

Bunun için jquery kodu kullanın. (Alternatif çözüm)

    $(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 gibi in-tablo sorunu giderir. Metni merkeze hizalamak için üst div'ı kullandım. bu şekilde diğer dillerde bile iyi görünür (çeviri, farklı genişlik)

@ Robusto'nun çözümü yapmaya çalıştığım şeyin en basitiydi, onu kullanmanızı öneririm. Bir galeri yapmak için sırasız bir listedeki görüntüler için de aynı şeyi yapmaya çalışıyordum ... Bir js keman yaptım. Burada denemek için çekinmeyin .

[robusto'nun örnek kodu kullanılarak kuruldu]
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%}

Büyük ekranlarda iyi bir yaklaşımdır. Onun iyi değil, ama iyi bir kirli düzeltme.

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

Hepsi bu!