Bagaimana cara memusatkan <ul> <li> ke div

Bagaimana cara memusatkan daftar yang tidak berurutan <li>menjadi lebar tetap 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:[email protected]">    [email protected]</a></p></td>
  </tr>
  </tbody>
</table>

Karena uldan lielemen secara display: blockdefault - beri mereka margin otomatis dan lebar yang lebih kecil dari penampungnya .

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

Jika Anda telah mengubah properti tampilan mereka, atau melakukan sesuatu yang menimpa aturan perataan normal (seperti mengambang) maka ini tidak akan berfungsi.

Untuk memusatkan ul dan juga memiliki elemen li di tengahnya juga , dan membuat lebar ul berubah secara dinamis, gunakan display: inline-block; dan membungkusnya di div tengah.

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

Memperbarui

Berikut ini tautan jsFiddle ke kode di atas.

Saya suka flexbox:

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

Langkah :

1. Menulis style="text-align:center;"untuk orang tua divdariul
2. Tulis style="display:inline-table;"keul
3. Tulis style="display:inline;"keli

atau gunakan

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

Ini adalah cara yang lebih baik untuk memusatkan UL di dalam wadah DIV mana pun.

Solusi CSS ini tidak menggunakan properti Width dan Float. Float: Left and Width: 70%, akan membuat Anda pusing ketika Anda perlu menduplikasi menu Anda pada halaman yang berbeda dengan item menu yang berbeda.

Alih-alih menggunakan lebar, kami menggunakan padding dan margin untuk menentukan ruang di sekitar item teks / menu. Selain itu, alih-alih menggunakan Float: Left di elemen LI, gunakan display: inline-block.

Dengan mengambangkan LI Anda ke kiri, Anda benar-benar mengapungkan konten Anda ke kiri dan kemudian Anda harus menggunakan salah satu Peretasan yang disebutkan di atas untuk memusatkan UL Anda. Tampilan: inline-block membuat properti Float Anda untuk Anda (semacam). Ini mengambil elemen LI Anda dan mengubahnya menjadi elemen blok yang terletak berdampingan satu sama lain (tidak mengambang).

Dengan desain Responsif dan menggunakan kerangka kerja seperti Bootstrap atau Foundation, akan ada masalah saat mencoba mengapung dan memusatkan konten. Mereka memiliki beberapa kelas bawaan, tetapi selalu lebih baik melakukannya dari awal. Solusi ini jauh lebih baik untuk menu dinamis (seperti sistem menu Adobe Business Catalyst).

Referensi untuk tutorial ini dapat ditemukan di: 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;
}

Bisa jadi

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

atau

div li
{
text-align: center;
}

tergantung pada bagaimana seharusnya terlihat (atau menggabungkannya)

Untuk memusatkan objek blok (misalnya ul) Anda perlu mengatur lebar di atasnya dan kemudian Anda dapat mengatur objek margin kiri dan kanan ke otomatis.

Untuk memusatkan konten inline dari objek blok (mis. Konten inline li) Anda dapat mengatur properti css text-align: center;.

Mencoba

div#divID ul {margin:0 auto;}

Tambahkan saja text-align: center;ke <ul>. Masalah terpecahkan.

Menarik tapi coba ini dengan elemen li mengambang di dalam ul: Contoh di sini

Masalahnya sekarang: ul membutuhkan lebar tetap untuk benar-benar duduk di tengah. Bagaimanapun kita ingin menjadi relatif terhadap lebar penampung (atau dinamis), margin: 0 otomatis pada ul tidak bekerja.

Cara yang lebih baik adalah melepaskan daftar UL / Li dan menggunakan contoh pendekatan yang berbeda di sini

Jika Anda mengetahui lebarnya ulmaka Anda dapat mengatur margin fileul ke0 auto;

Ini akan menyelaraskan ul di tengah div yang berisi

Contoh:

HTML:

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

CSS:

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

Inilah solusi yang bisa saya temukan:

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

Pilihan lainnya adalah:

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

Saya telah mencari kasus yang sama dan mencoba semua jawaban dengan mengubah lebarnya <li>.
Sayangnya semuanya gagal mendapatkan jarak yang sama di kiri dan kanan <ul>kotak penalti.

Kecocokan terdekat adalah jawaban ini tetapi perlu menyesuaikan perubahan lebar dengan padding

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

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

Lihat hasil di bawah ini, semua jarak antara <li>juga ke <ul>kotak adalah sama.

Anda dapat memeriksanya di jsFiddle ini:
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>

gunakan tag tengah sekolah tua

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

:-)