Làm cách nào để căn giữa menu <UL> nằm ngang?

Tôi cần phải căn giữa một menu ngang.
Tôi đã thử nhiều giải pháp khác nhau, bao gồm cả hỗn hợp inline-block/ block/ center-alignv.v., nhưng không thành công.

Đây là mã của tôi:

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

CẬP NHẬT

Tôi biết làm thế nào để trung tâm sắp xếp ultrong div. Điều đó có thể được thực hiện bằng cách sử dụng đề xuất của Sarfraz. Nhưng các mục danh sách vẫn còn trôi nổi trong ul.

Tôi có cần Javascript để thực hiện điều này không?

Từ http://pmob.co.uk/pob/centred-float.htm :

Tiền đề là đơn giản và về cơ bản chỉ liên quan đến một trình bao bọc phao không có chiều rộng được thả sang bên trái và sau đó chuyển màn hình sang vị trí chiều rộng bên trái: tương đối; còn lại: -50%. Tiếp theo, phần tử bên trong lồng nhau được đảo ngược và vị trí tương đối + 50% được áp dụng. Điều này có tác dụng đặt phần tử chết ở trung tâm. Định vị tương đối duy trì dòng chảy và cho phép các nội dung khác chảy bên dưới.

Mã

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

Điều này làm việc cho tôi. Nếu tôi không hiểu sai câu hỏi của bạn, bạn có thể thử.

    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>

Với flexbox CSS3. Đơn giản.

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

ul li {
  padding: 0 8px;
}

Đây là cách đơn giản nhất mà tôi tìm thấy. Tôi đã sử dụng html của bạn. Phần đệm chỉ là để thiết lập lại mặc định của trình duyệt.

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>

Đây là một bài viết hay về cách thực hiện theo cách khá vững chắc, không có bất kỳ hack và hỗ trợ trình duyệt chéo đầy đủ. Làm việc cho tôi:

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

Thử cái này:

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

Làm như thế này:

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

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

Giống như nhiều bạn, tôi đã vật lộn với điều này trong một thời gian. Giải pháp cuối cùng phải làm với div chứa UL. Tất cả các đề xuất về thay đổi phần đệm, chiều rộng, v.v. của UL không có tác dụng, nhưng những điều sau đây đã có.

Đó là tất cả về margin:0 auto;div chứa. Tôi hy vọng điều này sẽ giúp một số người, và cảm ơn tất cả những người khác đã đề xuất điều này kết hợp với những thứ khác.

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

Bản trình diễn - 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 sạch sẽ hơn nhiều.

Nói chung, cách tập trung một yếu tố mức độ màu đen (như a <ul>) là sử dụng thuộc margin:auto;tính.

Để căn chỉnh các thành phần cấp độ văn bản và nội tuyến trong một phần tử mức khối sử dụng text-align:center;. Vì vậy, tất cả cùng nhau một cái gì đó như ...

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

... nên làm việc.

Trường hợp bên lề là Internet Explorer6 ... hoặc thậm chí các IE khác khi không sử dụng a <!DOCTYPE>. IE6 sắp xếp không chính xác các elemnt cấp khối bằng cách sử dụng text-align. Vì vậy, nếu bạn đang tìm cách hỗ trợ IE6 (hoặc không sử dụng a <!DOCTYPE>), giải pháp đầy đủ của bạn là ...

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

Như một chú thích, tôi nghĩ id="topmenu firstlevel"không hợp lệ vì một idthuộc tính không thể chứa dấu cách ...? Thật vậy, khuyến nghị w3c định nghĩa các idthuộc tính như một 'tên' loại ...

Mã thông báo ID và NAME phải bắt đầu bằng một chữ cái ([A-Za-z]) và có thể được theo sau bởi bất kỳ số lượng chữ cái, chữ số ([0-9]), dấu gạch ngang ("-"), dấu gạch dưới ("_") , dấu hai chấm (":") và dấu chấm (".").

Tôi đã sử dụng thuộc tính display: inline-block: giải pháp bao gồm sử dụng một trình bao bọc với chiều rộng cố định. Bên trong, khối ul với khối nội tuyến để hiển thị. Sử dụng này, ul chỉ mất chiều rộng cho nội dung thực sự! và cuối cùng là lề: 0 tự động, để căn giữa khối nội tuyến này =)

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

tôi sử dụng mã jquery cho việc này. (Giải pháp thay thế)

    $(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 như bảng nội tuyến sửa chữa vấn đề. Tôi đã sử dụng div cha để căn chỉnh văn bản vào giữa. cách này có vẻ tốt ngay cả trong các ngôn ngữ khác (bản dịch, độ rộng khác nhau)

@ Giải pháp của Robusto là đơn giản nhất cho những gì tôi đang cố gắng thực hiện, tôi khuyên bạn nên sử dụng nó. Tôi đã cố gắng làm điều tương tự cho các hình ảnh trong một danh sách không có thứ tự để tạo ra một bộ sưu tập ... Tôi đã tạo ra một trò đùa js để đánh lừa nó. Hãy thử nó ở đây.

[nó được thiết lập bằng mã mẫu của Strongo]
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%}

Là một xấp xỉ khá trên màn hình lớn. Nó không tốt, nhưng một sửa chữa bẩn tốt.

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

Đó là tất cả!