Muszę wyśrodkować i wyrównać poziome menu.
Próbowałem różnych rozwiązań, w tym mieszanki inline-block
/ block
/ center-align
itp., Ale nie udało mi 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>
AKTUALIZACJA
Wiem, jak wyśrodkować, wyrównać ul
wewnątrz div
. Można to osiągnąć za pomocą sugestii Sarfraza. Ale elementy listy są nadal pływające, pozostawione w ramach ul
.
Czy potrzebuję JavaScript, aby to osiągnąć?
Odpowiedzi:
Z http://pmob.co.uk/pob/centred-float.htm :
Kod
źródło
position: relative
menu głównego zmienia zachowanieposition:absolute
podmenu.#buttons
identyfikator w pytaniu OP? Gdzie w twojej odpowiedzi jest zauważenie, że musi go użyć? Jak można to zaakceptować i uzyskać najlepszą odpowiedź, jeśli tak naprawdę nie odpowiadasz na pytanie, a jedynie cytujesz jakieś bla-bla na temat nie na temat z jakiegoś linku?To działa dla mnie. Jeśli nie zinterpretowałem Twojego pytania źle, możesz spróbować.
źródło
text-align: left;
Z Flexbox CSS3. Prosty.
źródło
To najprostszy sposób, jaki znalazłem. Użyłem twojego html. Dopełnienie służy tylko do resetowania ustawień domyślnych przeglądarki.
źródło
Oto dobry artykuł o tym, jak to zrobić w całkiem solidny sposób, bez żadnych hacków i pełnej obsługi różnych przeglądarek. Pracuje dla mnie:
-> http://matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support
źródło
Spróbuj tego:
źródło
Zrób to tak:
Oraz CSS:
źródło
Jak wielu z was, od jakiegoś czasu się z tym zmagam. Ostatecznie rozwiązanie dotyczyło elementu div zawierającego UL. Wszystkie sugestie dotyczące zmiany wyściółki, szerokości itp. UL nie przyniosły efektu, ale następujące były.
Chodzi o element
margin:0 auto;
DIV zawierający. Mam nadzieję, że to pomoże niektórym ludziom i dziękuję wszystkim, którzy już zasugerowali to w połączeniu z innymi rzeczami.źródło
Demo - http://codepen.io/grantex/pen/InLmJ
O tak dużo czystszy.
źródło
Ogólnie rzecz biorąc, sposobem na wyśrodkowanie elementu poziomu czerni (takiego jak a
<ul>
) jest użyciemargin:auto;
właściwości.Aby wyrównać tekst i elementy poziomu liniowego w elemencie blokowym, użyj
text-align:center;
. Więc razem coś w rodzaju ...... powinno działać.
Przypadkiem marginesowym jest Internet Explorer6 ... lub nawet inne IE, gdy nie używasz
<!DOCTYPE>
. IE6 nieprawidłowo wyrównuje elementy na poziomie bloków przy użyciutext-align
. Więc jeśli chcesz obsługiwać IE6 (lub nie używasz a<!DOCTYPE>
), Twoje pełne rozwiązanie to ...Jako przypis, myślę, że
id="topmenu firstlevel"
jest nieprawidłowy, ponieważid
atrybut nie może zawierać spacji ...? Rzeczywiście rekomendacja W3C definiuje tenid
atrybut jako „Nazwa” typu ...źródło
Użyłem właściwości display: inline-block: rozwiązanie polega na zastosowaniu wrappera o stałej szerokości. Wewnątrz blok ul z blokiem inline do wyświetlania. Używając tego, ul po prostu przyjmuje szerokość dla prawdziwej zawartości! i wreszcie margin: 0 auto, aby wyśrodkować ten inline-block =)
źródło
używam do tego kodu jQuery. (Alternatywne rozwiązanie)
źródło
ul jako inline-table rozwiązuje problem. Użyłem nadrzędnego elementu DIV, aby wyrównać tekst do środka. w ten sposób wygląda dobrze nawet w innych językach (tłumaczenie, inna szerokość)
źródło
Rozwiązanie @ Robusto było najprostsze w tym, co próbowałem zrobić, sugeruję, abyś go użył. Próbowałem zrobić to samo z obrazami na nieuporządkowanej liście, aby stworzyć galerię ... Zrobiłem js skrzypce, żeby się z tym wygłupiać. Nie krępuj się wypróbowania tutaj.
[został utworzony przy użyciu przykładowego kodu solido]
HTML:
CSS:
źródło
To przyzwoite przybliżenie na dużych ekranach. To nie jest dobre, ale dobre, brudne poprawki.
źródło
To wszystko!
źródło