Làm cách nào để căn giữa <ul> <li> thành div

Làm cách nào để căn giữa một danh sách không có thứ tự <li>thành một chiều rộng cố định 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>

Vì ulvà licác phần tử là display: blocktheo mặc định - cung cấp cho chúng lề tự động và chiều rộng nhỏ hơn vùng chứa của chúng .

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

Nếu bạn đã thay đổi thuộc tính hiển thị của chúng hoặc làm điều gì đó ghi đè các quy tắc căn chỉnh thông thường (chẳng hạn như thả nổi chúng) thì điều này sẽ không hoạt động.

Để căn giữa ul và cũng có các phần tử li ở giữa nó và làm cho chiều rộng của ul thay đổi động, hãy sử dụng display: inline-block; và bọc nó trong một div ở giữa.

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

Cập nhật

Đây là một liên kết jsFiddle đến đoạn mã trên.

Tôi yêu flexbox:

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

Các bước:

1. Viết style="text-align:center;"cho cha mẹ divcủaul
2. Viết style="display:inline-table;"choul
3. Viết style="display:inline;"choli

hoặc dùng

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

Đây là cách tốt hơn để căn giữa UL bên trong bất kỳ vùng chứa DIV nào.

Giải pháp CSS này không sử dụng thuộc tính Width và Float. Float: Left và Width: 70%, sẽ khiến bạn đau đầu khi cần sao chép menu của mình trên các trang khác nhau với các mục menu khác nhau.

Thay vì sử dụng chiều rộng, chúng tôi sử dụng đệm và lề để xác định không gian xung quanh mục văn bản / menu. Ngoài ra, thay vì sử dụng Float: Left trong phần tử LI, hãy sử dụng display: inline-block.

Bằng cách thả nổi LI của bạn sang trái, bạn thực sự thả nổi nội dung của mình sang trái và sau đó bạn phải sử dụng một trong các Hack được đề cập ở trên để căn giữa UL của mình. Display: inline-block tạo thuộc tính Float cho bạn (đại loại là). Nó lấy phần tử LI của bạn và biến nó thành một phần tử khối nằm cạnh nhau (không nổi).

Với thiết kế đáp ứng và sử dụng các khuôn khổ như Bootstrap hoặc Foundation, sẽ có vấn đề khi cố gắng làm nổi và căn giữa nội dung. Chúng có một số lớp tích hợp, nhưng tốt hơn hết là bạn nên làm điều đó từ đầu. Giải pháp này tốt hơn nhiều cho các menu động (Chẳng hạn như hệ thống menu Adobe Business Catalyst).

Tham khảo cho hướng dẫn này có thể được tìm thấy tại: 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;
}

Có thể là

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

hoặc là

div li
{
text-align: center;
}

phụ thuộc vào cách nó trông như thế nào (hoặc kết hợp chúng)

Để căn giữa một đối tượng khối (ví dụ ul:), bạn cần đặt chiều rộng trên nó và sau đó bạn có thể đặt lề trái và lề phải của đối tượng đó thành tự động.

Để căn giữa nội dung nội tuyến của đối tượng khối (ví dụ: nội dung nội tuyến của li), bạn có thể đặt thuộc tính css text-align: center;.

Thử

div#divID ul {margin:0 auto;}

Chỉ cần thêm text-align: center;vào của bạn <ul>. Vấn đề đã được giải quyết.

Thật thú vị nhưng hãy thử điều này với các phần tử li nổi bên trong ul: Ví dụ ở đây

Vấn đề bây giờ: ul cần một chiều rộng cố định để thực sự nằm ở trung tâm. Tuy nhiên, chúng tôi muốn nó tương ứng với chiều rộng vùng chứa (hoặc động), tự động margin: 0 trên ul không hoạt động.

Một cách tốt hơn là loại bỏ danh sách UL / Li và sử dụng một ví dụ cách tiếp cận khác tại đây

Nếu bạn biết chiều rộng của dấu ulthì bạn chỉ cần đặt lề của dấu ullà0 auto;

Điều này sẽ căn chỉnh ulở giữa div chứa

Thí dụ:

HTML:

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

CSS:

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

Đây là giải pháp tôi có thể tìm thấy:

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

Một lựa chọn khác là:

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

Tôi đã tìm kiếm trường hợp tương tự và đã thử tất cả các câu trả lời bằng cách thay đổi chiều rộng của <li>.
Thật không may, tất cả đều không đạt được cùng một khoảng cách ở bên trái và bên phải của <ul>hộp.

Đối sánh gần nhất là câu trả lời này nhưng nó cần phải điều chỉnh sự thay đổi của chiều rộng bằng phần đệm

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

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

Xem kết quả bên dưới, tất cả khoảng cách từ <li>cũng đến <ul>hộp đều giống nhau.

Bạn có thể kiểm tra nó trên jsFiddle này:
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>

sử dụng thẻ trung tâm oldschool

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

:-)