<ul> <li> öğesini div olarak nasıl ortalayabilirim

Sıralanmamış bir listeyi <li>sabit genişlikte nasıl ortalayabilirim div?

<table width="100%">
  <tbody>
  <tr>
    <td width="41%"><img src="/web/20100104192317im_/http://www.studioteknik.com/html2/html/images/hors-service.jpg" width="400" height="424"></td>
    <td width="59%"><p align="left">&nbsp;</p>
      <h1 align="left">StudioTeknik.com</h1>
      <p><br align="left">
        <strong>Marc-André Ménard</strong></p>
      <ul>
        <li>Photographie digitale</li>
        <li>Infographie </li>
        <li>Débug et IT (MAC et PC)</li>
        <li> Retouche </li>
        <li>Site internet</li>
        <li>Graphisme</li>
      </ul>
      <p align="left"><span class="style1"><strong>Cellulaire en suisse : </strong></span><a href="#">+41 079 573 48 99</a></p>
      <p align="left"><strong class="style1">Skype : </strong> <a href="#">menardmam</a></p>
    <p align="left"><strong class="style1">Courriel :</strong><a href="https://web.archive.org/web/20100104192317/mailto:menardmam@hotmail.com">    info@studioteknik.com</a></p></td>
  </tr>
  </tbody>
</table>

Yana ulve lielemanlar display: blockvarsayılan - onlara kenar ve kaptan daha küçük olan bir genişliğe otomatik .

ul {
    width: 70%;
    margin: auto;
}

Görüntüleme özelliklerini değiştirdiyseniz veya normal hizalama kurallarını geçersiz kılan bir şey yaptıysanız (yüzdürme gibi), bu işe yaramaz.

Ul'yi ortalamak ve aynı zamanda li öğelerini de ortalamak ve ul'nin genişliğini dinamik olarak değiştirmek için display: inline-block; ve ortalanmış bir div içine sarın.

<style type="text/css">
    .wrapper {
        text-align: center;
    }
    .wrapper ul {
        display: inline-block;
        margin: 0;
        padding: 0;
        /* For IE, the outcast */
        zoom:1;
        *display: inline;
    }
    .wrapper li {
        float: left;
        padding: 2px 5px;
        border: 1px solid black;
    }
</style>

<div class="wrapper">
    <ul>
        <li>Three</li>
        <li>Blind</li>
        <li>Mice</li>
    </ul>
</div>

Güncelleme

İşte yukarıdaki koda bir jsFiddle bağlantısı .

Flexbox'ı seviyorum:

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

Adımlar:

1. Yaz style="text-align:center;"ebeveyne divaitul
2. Yaz style="display:inline-table;"içinul
3. Yaz style="display:inline;"içinli

ya da kullan

<div class="menu">
 <ul>
   <li>item 1 </li>
   <li>item 2 </li>
   <li>item 3 </li>
 </ul>
</div>

<style>
 .menu { text-align: center; }
 .menu ul { display:inline-table; }
 .menu li { display:inline; }
</style>

Bu, UL'leri herhangi bir DIV konteynerinin içinde ortalamanın daha iyi bir yoludur.

Bu CSS çözümü Genişlik ve Kayan özelliklerini kullanmaz. Kayan: Sol ve Genişlik:% 70, menünüzü farklı menü öğeleriyle farklı sayfalarda çoğaltmanız gerektiğinde baş ağrısına neden olur.

Metnin / menü öğesinin etrafındaki boşluğu belirlemek için genişlik kullanmak yerine dolgu ve kenar boşluğu kullanırız. Ayrıca, LI öğesinde Float: Left kullanmak yerine display: inline-block kullanın.

LI'nizi sola kaydırarak, içeriğinizi tam anlamıyla sola kaydırırsınız ve ardından UL'nizi ortalamak için yukarıda belirtilen Hacks'lerden birini kullanmanız gerekir. Ekran: inline-block Float mülkünüzü sizin için oluşturur (bir tür). LI elemanınızı alır ve onu yan yana duran (yüzmeyen) bir blok elemana dönüştürür.

Duyarlı tasarım ve Bootstrap veya Foundation gibi çerçevelerin kullanılmasıyla, içeriği kaydırmaya ve ortalamaya çalışırken sorunlar olacaktır. Bazı yerleşik sınıfları var, ancak bunu sıfırdan yapmak her zaman daha iyidir. Bu çözüm, dinamik menüler için çok daha iyidir (Adobe Business Catalyst menü sistemi gibi).

Bu eğitici için referans şu adreste bulunabilir: http://html-tuts.com/center-div-image-table-ul-inside-div/

HTML

<div class="container">
        <ul>
            <li><a href="#">Button</a></li>
            <li><a href="#">Button</a></li>
            <li><a href="#">Button</a></li>
            <li><a href="#">Button</a></li>
            <li><a href="#">Button</a></li>
        </ul>
    </div>

CSS

.container {
    text-align: center;
    border: 1px solid green;
}
.container ul {
    border: 2px solid red;
    display: inline-block;
    margin: 10px 0;
    padding: 2px;
}
.container li {
    display: inline-block;
}
.container li a {
    display: inline-block;
    background: #444;
    color: #FFF;
    padding: 5px;
    text-decoration: none;
}

Ya olabilir

div ul
{
 width: [INSERT FIXED WIDTH]
 margin: 0 auto;
}

veya

div li
{
text-align: center;
}

nasıl görünmesi gerektiğine bağlıdır (veya bunları birleştirerek)

Bir blok nesneyi (örneğin, ul) ortalamak için, üzerine bir genişlik ayarlamanız gerekir ve ardından bu nesnelerin sol ve sağ kenar boşluklarını otomatik olarak ayarlayabilirsiniz.

Blok nesnenin satır içi içeriğini (örneğin satır içi içeriği li) ortalamak için css özelliğini ayarlayabilirsiniz text-align: center;.

Deneyin

div#divID ul {margin:0 auto;}

Sadece eklemek text-align: center;adresinden Müşteri <ul>. Sorun çözüldü.

İlginç, ancak bunu ul içinde kayan li öğeleriyle deneyin: Örnek burada

Şimdiki sorun: ul'nin merkezde oturması için sabit bir genişliğe ihtiyacı var. Bununla birlikte, kapsayıcı genişliğine (veya dinamik) göre olmasını istiyoruz, margin: 0 ul üzerinde auto çalışmıyor.

Daha iyi bir yol, UL / Li listesini bırakmak ve burada farklı bir yaklaşım örneği kullanmaktır.

Genişliğini biliyorsanız, ulo zaman basitçe kenar boşluğunu ayarlayabilirsiniz ul.0 auto;

Bu ul, içeren div'in ortasında hizalayacaktır.

Misal:

HTML:

<div id="container">
 <ul>
  <li>Item1</li>
  <li>Item2</li>
 </ul>
<div>

CSS:

  #container ul{
    width:300px;
    margin:0 auto;
  }

İşte bulabildiğim çözüm:

#wrapper {
  float:right;
  position:relative;
  left:-50%;
  text-align:left;
}
#wrapper ul {
  list-style:none;
  position:relative;
  left:50%;
}

#wrapper li{
  float:left;
  position:relative;
}

Diğer bir seçenek ise:

HTML

<nav>
  <ul class = "main-nav"> 
   <li> Productos </li>
   <li> Catalogo </li>
   <li> Contact </li>  
   <li> Us </li>
  </ul>
</nav>    

CSS:

nav {
  text-align: center;
}

nav .main-nav li {
  float: left;
  width: 20%;
  margin-right: 5%;
  font-size: 36px;
  text-align: center;
}

Aynı davayı arıyordum ve genişliğini değiştirerek tüm cevapları denedim <li>.
Ne yazık ki hepsi <ul>kutunun solunda ve sağında aynı mesafeyi almada başarısız oldu .

En yakın eşleşme bu cevaptır, ancak genişlik değişikliğini dolgu ile ayarlaması gerekir

.container ul {
    ...
    padding: 10px 25px;
}

.container li {
  ...
  width: 100px;
}

Sonuç aşağıda bulabilirsiniz arasındaki tüm mesafenin <li>de <ul>kutunun aynıdır.

Bu jsFiddle'da kontrol edebilirsiniz:
http://jsfiddle.net/qwbexxog/14/

<div id="container">
  <table width="100%" height="100%">
    <tr>
      <td align="center" valign="middle">
        <ul>
          <li>item 1</li>
          <li>item 2</li>
          <li>item 3</li>
        </ul>
      </td>
    </tr>
  </table>
</div>

oldschool merkez etiketlerini kullan

<div> <center> <ul> <li>...</li> </ul></center> </div>

:-)