Tại sao tôi không thể căn giữa với lề: 0 tự động?

130

Tôi có một #headerdiv đó 100% widthvà trong div đó tôi có một danh sách không có thứ tự. Tôi đã áp dụng margin: 0 autocho danh sách không có thứ tự nhưng nó sẽ không tập trung vào danh sách div.

Ai đó có thể vui lòng cho tôi biết tại sao? Tôi nghĩ rằng nếu tôi xác định chiều rộng của div cha, thì danh sách không có thứ tự sẽ có thể tự căn giữa margin: 0 auto. Tôi đang thiếu gì?

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

<style>

* {
    margin: 0;
    padding: 0;
}

#header {
    width: 100%;    
    background-color: #333;
    min-height: 160px;
    font-family:Arial, Helvetica, sans-serif;
}

#sitename {
    font-size: 50px;
    width: 620px;
    margin:0 auto;
    padding-top: 35px;
    color:#999;
}

#header ul {
    float: right;
    margin: 0 auto;
}

#header ul li {
    float: left;
    padding-right: 20px;
    list-style-type: none;
    font-size: 20px;
}

</style>

</head>

<body>

<div id="header">
    <h1 id="sitename">Photography Auction Site</h1>

    <ul>
        <li>List of Photos</li>
        <li>Image Gallery</li>
        <li>Contact Us</li>
    </ul>
</div>

</body>
</html>

html css margin

— ngựa vằn
nguồn

Bạn đang dùng trình duyệt nào? IE / Win có một số vấn đề với Margin auto.

— JD Frias

Tại sao bạn cũng nổi ul của bạn sang phải? Bỏ nó ra, và có lẽ cũng là cái phao: còn lại cho li, và bạn sẽ ổn thôi.

— Simon

1

Tôi đang tạo một thanh điều hướng. Tôi đã lấy phao ra bên phải cho ul và đặt phao bên trái cho li, nhưng điều đó đặt tất cả ở bên trái bây giờ.

— zeckdude

135

Bạn cần xác định chiều rộng của phần tử bạn đang định tâm, không phải phần tử cha.

#header ul {
    margin: 0 auto;
    width: 90%;
}

Chỉnh sửa : Ok, tôi đã thấy trang thử nghiệm bây giờ và đây là cách tôi nghĩ bạn muốn nó:

#header ul {
    list-style:none;
    margin:0 auto;
    width:90%;
}

/* Remove the float: left; property, it interferes with display: inline and 
 * causes problems. (float: left; makes the element implicitly a block-level
 * element. It is still good to use display: inline on it to overcome a bug
 * in IE6 and below that doubles horizontal margins for floated elements)
 * The styles below is the full style for the list-items. 
 */
#header ul li {
    color:#CCCCCC;
    display:inline;
    font-size:20px;
    padding-right:20px;
}

— PatrikAkerstrand
nguồn

2

Điều gì nếu chiều rộng của ul sẽ năng động. Tôi đang suy nghĩ về việc tự động đưa các văn bản khác nhau vào li với PHP vì vậy tôi đang cố gắng dự đoán điều đó.

— zeckdude

2

Yup, sau đó bạn không thể trung tâm bằng cách sử dụng lề: auto;

— PatrikAkerstrand

1

Tôi đã thử đề xuất mới nhất của bạn, nhưng nó không hoạt động. Tôi đã tải lên phiên bản mới nhất với các đề xuất của bạn đến cùng một vị trí để bạn có thể thấy những gì tôi đang trải nghiệm. Các ul chỉ được đẩy sang phải khoảng 50px.

— zeckdude

1

Giống như tôi đã nói trong đề xuất của mình, hãy xóa float: left

— PatrikAkerstrand

1

Điều đó đã làm việc TUYỆT VỜI! Cảm ơn bạn rất nhiều vì đã gắn bó với tôi và giúp đỡ tôi! Vấn đề đó đã và đang giết chết tôi! Cảm ơn một lần nữa!

— zeckdude

43

Một khối nội tuyến bao gồm toàn bộ dòng (từ trái sang phải), do đó, lề trái và / hoặc phải sẽ không hoạt động ở đây. Những gì bạn cần là một khối, một khối có viền bên trái và bên phải để có thể bị ảnh hưởng bởi lề.

Đây là cách nó hoạt động với tôi:

#content {
display: block;
margin: 0 auto;
}

— Cuốc
nguồn

Cảm ơn bạn đã gợi ý rất hữu ích, tôi gặp vấn đề tương tự với một yếu tố nội tuyến và tôi không thể hiểu tại sao nó không hoạt động

— mastazi

Đây là câu trả lời tốt nhất, và hoạt động cho cửa sổ đa kích thước.

— Yuda Prawira

14

Tại sao không?

#header {
    text-align: center;
}

#header ul {
    display: inline;
}

— kalys.osmonov
nguồn

Tôi đã thêm văn bản-align: left; đến #header ul để căn giữa ul và giữ văn bản trong li thẳng hàng bên trái. Tôi cũng cần thiết lập ul để hiển thị dưới dạng khối nội tuyến để chiều rộng là động (tự động).

— Brent tự

3

Tôi không biết tại sao câu trả lời đầu tiên là tốt nhất, tôi đã thử nó và không làm việc trong thực tế, như @ kalys.osmonov nói, bạn có thể cho text-align:centervào header, nhưng bạn phải chắc ullà inline-blockhơn inline, và cũng có thể bạn phải thông báo mà text-aligncó thể được thừa hưởng đó là không tốt ở một mức độ, vì vậy cách tốt hơn (không làm việc dưới IE 9) đang sử dụng marginvà transform. Chỉ cần loại bỏ float rightvà margin;0 autotừ ul, như dưới đây:

#header ul {
   /* float: right; */
   /* margin: 0 auto; */
   display: inline-block;
   margin-left: 50%; /* From parent width */
   transform: translateX(-50%); /* use self width which can be unknown */
  -ms-transform: translateX(-50%); /* For IE9 */
}

Cách này có thể khắc phục sự cố khiến độ rộng ultrung tâm động nếu bạn không quan tâm đến IE8, v.v.

— hóa đơn gấp đôi
nguồn

0

Chúng ta có thể đặt chiều rộng cho thẻ ul sau đó nó sẽ căn giữa.

#header ul {
    display: block;
    margin: 0 auto;
    width: 420px;
    max-width: 100%;
}

— Vani S
nguồn