Jak wyśrodkować menu poziome?
/ Align = "center" bgcolor = "# e0ffe0 " / król Danii / / align = center /
Wypróbowałem różne rozwiązania, w tym mieszankę inline-block
/ block
/ center-align
itd. ale nie udało się.
Oto Mój kod:
<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
Wiem jak wyśrodkować ul
w div
. Można to osiągnąć za pomocą sugestii Sarfraza.
Ale elementy listy są nadal unoszone w lewo w ul
.
Czy potrzebuję Javascript, aby to osiągnąć?
16 answers
Z http://pmob.co.uk/pob/centred-float.htm :
Założenie jest proste i zasadniczo obejmuje tylko bezzębną owijkę pływakową, która jest unoszona w lewo, a następnie przesunięta poza ekran do lewej pozycji szerokości: względna; lewa:-50%. Następnie zagnieżdżony element wewnętrzny jest odwrócony i stosuje się względną pozycję +50%. Efekt ten polega na umieszczeniu martwego elementu w środku. Pozycjonowanie względne utrzymuje przepływ i umożliwia przepływ innych treści pod spodem.
Kod
#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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-01-06 10:18:22
To mi pasuje. Jeśli nie źle zrozumiałem twoje pytanie, możesz spróbować.
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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-25 02:02:42
Z CSS3 flexbox. Proste.
ul {
display: flex;
justify-content: center;
}
ul li {
padding: 0 8px;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-04-17 15:10:11
To najprostszy sposób, jaki znalazłem. Użyłem twojego html ' a. Wypełnienie służy tylko do zresetowania domyślnych ustawień przeglądarki.
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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-03-11 14:07:36
Oto dobry artykuł o tym, jak to zrobić w dość solidny sposób, bez żadnych hacków i pełnego wsparcia między przeglądarkami. Działa dla mnie:
--> http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-11-28 16:21:05
Zrób to tak:
<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>
I 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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-05-19 12:52:24
Jak wielu z was, zmagam się z tym od jakiegoś czasu. Ostatecznie rozwiązanie miało związek z div zawierającym UL. Wszelkie sugestie dotyczące zmiany wyściółki, szerokości itp. z UL nie odniosło żadnego efektu, ale następujące
It ' s all about the margin:0 auto;
na stronie div. Mam nadzieję, że pomoże to niektórym ludziom i dziękuję wszystkim, którzy już zasugerowali to w połączeniu z innymi rzeczami.
.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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-10-20 18:58:01
Spróbuj tego:
div.topmenu-design ul
{
display:block;
width:600px; /* or whatever width value */
margin:0px auto;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-05-19 12:23:46
Ogólnie rzecz biorąc, sposobem na wyśrodkowanie elementu poziomu czerni (jak <ul>
) jest użycie właściwości margin:auto;
.
Aby wyrównać tekst i elementy poziomu inline wewnątrz elementu blokowego, użyj text-align:center;
. Więc wszyscy razem coś w tym stylu...
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 */
}
... powinno zadziałać.
Sprawa fringe to Internet Explorer6... lub nawet inne IEs, gdy nie używa <!DOCTYPE>
. IE6 nieprawidłowo wyrównuje elementy poziomu bloku za pomocą text-align
. Więc jeśli szukasz wsparcia IE6 (lub nie używasz <!DOCTYPE>
), Twój pełny rozwiązaniem jest...
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 */
}
Jako przypis uważam, że {[8] } jest nieprawidłowy, ponieważ atrybut id
nie może zawierać spacji... ? W rzeczywistości zalecenie W3C definiuje atrybut id
jako typ "nazwa" ...
Tokeny ID i NAME muszą zaczynać się od litera ([a-Za-z]) i może być dowolną liczbą liter, cyfr ([0-9]), myślniki ( " - " ), podkreślenia ("_"), dwukropki ( " :") i okresy (".").
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-05-19 13:04:31
Użyłem właściwości display: inline-block: rozwiązanie polega na użyciu owijki o stałej szerokości. Wewnątrz blok ul z wbudowanym blokiem do wyświetlania. Używając tego, UL po prostu bierze szerokość dla prawdziwej treści! i wreszcie margin: 0 auto, aby wyśrodkować ten 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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-03-16 04:21:10
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 dużo czystsze.Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-02-20 02:06:34
Używam do tego kodu jquery. (Rozwiązanie alternatywne)
$(document).ready(function() {
var margin = $(".topmenu-design").width()-$("#topmenu").width();
$("#topmenu").css('margin-left',margin/2);
});
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-01 12:13:54
div {
text-align: center;
}
div ul {
display: inline-table;
}
Ul as inline-table rozwiązuje problem z. Użyłem parent div, aby wyrównać tekst do centrum. w ten sposób wygląda dobrze nawet w innych językach (tłumaczenie, różna szerokość)
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-09-02 11:50:05
@Robusto rozwiązanie było najprostsze do tego, co próbowałem zrobić, proponuję go użyć. Próbowałem zrobić to samo dla zdjęć z nieuporządkowanej listy, aby zrobić galerię... Zrobiłem js fiddle, żeby się nim wygłupiać. Zapraszam do wypróbowania tutaj.
[został skonfigurowany przy użyciu przykładowego kodu robusto]
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;
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-09-02 12:11:37
ul{margin-left:33%}
Jest przyzwoitym przybliżeniem na dużych ekranach. To nie jest dobre, ale dobre brudne rozwiązanie.
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-02-02 14:08:02
.topmenu-design
{
display: inline-table;
}
To wszystko!Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-08-27 16:54:21