Mengapa saya tidak dapat memusatkan dengan margin: 0 otomatis?

130

Saya memiliki #headerdiv yang ada 100% widthdan di dalam div saya memiliki daftar unordered. Saya telah menerapkan margin: 0 autoke daftar tidak berurutan tetapi tidak akan memusatkannya di dalam header header.

Adakah yang bisa memberi tahu saya alasannya? Saya berpikir bahwa jika saya menentukan lebar div induk, maka daftar yang tidak terurut harus dapat memusatkan dirinya sendiri margin: 0 auto. Apa yang saya lewatkan?

Ini kode saya: 

<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 zeckdude
sumber
Browser apa yang Anda gunakan? IE / Win memiliki beberapa masalah dengan Margin auto.
JD Frias
Mengapa Anda juga melayang ul Anda ke kanan? Keluarkan itu, dan mungkin juga float: pergi ke li, dan Anda harus baik-baik saja.
Simon
1
Saya membuat bilah navigasi. Saya memang mengambil float tepat untuk ul dan memasukkan float kiri untuk li, tetapi itu menempatkan semuanya di sebelah kiri sekarang.
zeckdude

Jawaban:

135

Anda perlu menentukan lebar elemen yang Anda pusatkan, bukan elemen induk.

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

Sunting : Oke, saya telah melihat testpage sekarang, dan ini adalah bagaimana saya pikir Anda menginginkannya:

#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
sumber
2
bagaimana jika lebar ul akan dinamis. Saya berpikir untuk secara dinamis memasukkan teks yang berbeda ke dalam li dengan PHP nanti jadi saya mencoba mengantisipasi hal itu.
zeckdude
2
Yup, maka Anda tidak dapat memusatkan menggunakan margin: otomatis;
PatrikAkerstrand
1
Saya mencoba saran terbaru Anda, tetapi tidak berhasil. Saya telah mengunggah versi terbaru dengan rekomendasi Anda ke lokasi yang sama sehingga Anda dapat melihat apa yang saya alami. Ul hanya didorong ke kanan sekitar 50px.
zeckdude
1
Seperti saya katakan dalam saran saya, hapus float: left
PatrikAkerstrand
1
Itu berhasil! Terima kasih banyak untuk tetap bersamaku dan membantuku! Masalah itu telah membunuhku! Terima kasih lagi!
zeckdude
43

Blok-inline mencakup seluruh baris (dari kiri ke kanan), jadi margin kiri dan / atau kanan tidak akan berfungsi di sini. Yang Anda butuhkan adalah sebuah blok, sebuah blok memiliki batas di sebelah kiri dan kanan sehingga dapat dipengaruhi oleh margin.

Ini cara kerjanya untuk saya:

#content {
display: block;
margin: 0 auto;
}
Hoeks
sumber
Terima kasih atas saran yang sangat berguna, saya memiliki masalah yang sama dengan elemen inline dan saya tidak tahu mengapa itu tidak berhasil
mastazi
Ini jawaban terbaik, dan berfungsi untuk jendela multi ukuran.
Yuda Prawira
14

Kenapa tidak?

#header {
    text-align: center;
}

#header ul {
    display: inline;
}
kalys.osmonov
sumber
Saya menambahkan perataan teks: kiri; untuk # header ul untuk memusatkan ul dan menjaga teks dalam li sejajar ke kiri. Saya juga perlu mengatur ul untuk menampilkan inline-block agar lebar menjadi dinamis (otomatis).
Brent Self
3

Aku tidak tahu mengapa jawaban pertama adalah yang terbaik, aku mencoba dan tidak bekerja pada kenyataannya, seperti @ kalys.osmonov kata, Anda dapat memberikan text-align:centeruntuk header, tetapi Anda harus membuat ulsebagai inline-blockbukan inline, dan juga Anda harus pemberitahuan yang text-aligndapat diwarisi yang tidak baik pada tingkat tertentu, jadi cara yang lebih baik (tidak bekerja di bawah IE 9) menggunakan margindan transform. Hapus float rightdan margin;0 autodari ul, seperti di bawah ini:

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

Cara ini dapat memperbaiki masalah yang membuat lebar ulpusat dinamis jika Anda tidak peduli IE8 dll.

tagihan ganda
sumber
0

Kita dapat mengatur lebar untuk tag ul maka akan menyelaraskan pusat.

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