Aku perlu ke pusat align horizontal menu.
I've mencoba berbagai solusi, termasuk campuran dari inline-block
/ block
/ pusat-align
dll., tapi belum't berhasil.
Berikut ini adalah kode saya:
<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>
UPDATE
Aku tahu bagaimana untuk pusat menyelaraskan ul
dalam div
. Yang dapat dicapai dengan menggunakan Sarfraz's saran.
Tapi daftar barang-barang yang masih melayang kiri di dalam ul
.
Apakah saya membutuhkan Javascript untuk mencapai hal ini?
Dari http://pmob.co.uk/pob/centred-float.htm:
premis sederhana dan pada dasarnya hanya melibatkan widthless mengapung pembungkus yang melayang ke kiri dan kemudian bergeser dari layar ke kiri lebar position:relative; kiri:-50%. Berikutnya bersarang dalam elemen terbalik dan posisi relatif dari +50% diterapkan. Ini memiliki efek menempatkan elemen mati di tengah. Posisi relatif mempertahankan aliran dan memungkinkan konten lain yang mengalir di bawahnya.
<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>
#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*/
Ini bekerja untuk saya. Jika aku belum't disalahartikan pertanyaan anda, anda bisa mencobanya.
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> </li>
<li><a href="http://www.amazon.com">Amazon 2</a> </li>
<li><a href="http://www.amazon.com">Amazon 3</a></li>
</ul>
</div>
Dengan CSS3 flexbox. Sederhana.
ul {
display: flex;
justify-content: center;
}
ul li {
padding: 0 8px;
}
Ini adalah cara paling sederhana yang saya temukan. Saya menggunakan html anda. Padding adalah untuk me-reset browser default.
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>
Berikut ini's sebuah artikel yang baik tentang cara untuk melakukannya cukup rock-solid tanpa hacks dan penuh dukungan cross-browser. Bekerja untuk saya:
--> http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
Demo - 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 jadi jauh lebih bersih.
Lakukan seperti ini :
<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>
Dan 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;
}
Seperti banyak dari anda, saya've telah berjuang dengan ini untuk sementara. Solusi yang pada akhirnya harus dilakukan dengan div mengandung UL. Semua saran pada mengubah bantalan, lebar, dll. dari UL tidak memiliki efek, tetapi setelah melakukannya.
It's semua tentang margin:0 auto;
pada yang mengandung div. Saya harap ini membantu beberapa orang, dan terima kasih untuk semua orang yang sudah menyarankan hal ini di kombinasi dengan hal-hal lain.
.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;
}
Pada umumnya jalan ke pusat hitam tingkat elemen (seperti <ul>
) adalah menggunakan margin:auto;
properti.
Untuk menyelaraskan teks dan inline elemen-elemen tingkat blok elemen tingkat penggunaan text-align:center;
. Jadi semua bersama-sama seperti...
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 */
}
... harus bekerja.
Pinggiran kasus Internet Explorer6... atau bahkan lain IEs bila tidak menggunakan <!DOCTYPE>
. IE6 salah sejalan blok tingkat elemnts menggunakan text-align
. Jadi jika anda'kembali mencari untuk mendukung IE6 (atau tidak menggunakan <!DOCTYPE>
) anda solusi lengkap...
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 */
}
Sebagai catatan kaki, saya pikir id="topmenu firstlevel"
tidak valid sebagai sebuah id
atribut dapat't mengandung spasi... ? Memang rekomendasi w3c mendefinisikan id
atribut sebagai 'nama' tipe...
ID dan NAMA token harus dimulai dengan surat ([A-Za-z]) dan dapat diikuti oleh setiap jumlah huruf, digit ([0-9]), tanda hubung ("-"), garis bawah (&_"), titik dua (: ":"), dan periode (".").
Saya menggunakan display:inline-block properti: larutan yang terdiri dalam menggunakan bungkus dengan lebar tetap. Di dalam, ul blok dengan inline-block untuk tampilan. Menggunakan ini, ul hanya mengambil lebar untuk real konten! dan akhirnya margin: 0 auto, untuk pusat ini inline-block =)
/*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;
}
[itu diatur menggunakan robusto's contoh kode]
HTML:
<div id="centerDiv">
<ul class="centerUL">
<li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150> </a> </li>
<li><a href="http://www.amazon.com"><img src="http://placehold.it/200x150"></a> </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;
}
div {
text-align: center;
}
div ul {
display: inline-table;
}
ul sebagai inline-table perbaikan dengan masalah. Aku digunakan orang tua div untuk menyelaraskan teks ke pusat. cara ini terlihat baik bahkan dalam bahasa-bahasa lain (terjemahan, lebar yang berbeda)
.topmenu-design
{
display: inline-table;
}
Itu semua!