Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to center a ul (nav) that has flexible width

Tags:

css

I am trying to create the nav of

http://forrst-production.s3.amazonaws.com/posts/snaps/59125/mega.jpg?1297328693

the nav width will expand or contract according to the width of inner list items. How can I acheive that? or must I set a fixed width for the nav?

like image 773
Jiew Meng Avatar asked Feb 11 '11 03:02

Jiew Meng


People also ask

How do I center my UL NAV?

You can simply enter the list's address (e.g., ed. The block element (i.e., the list items inline-block) and the nav * text-align center (i.e., the center; *). Inlining-block is used (inline-block; *).

How do I center a nav element?

You can move the nav elements to the center by putting text-align:center on the ul because the list elements have been set to inline-block which means they can be centred in the same way that you can centre text.

How do I center an inline UL?

Just give the list centered text (e.g. ul. nav { text-align: center; } ) and the list items inline-block (e.g. ul. nav li { display: inline-block; } ).

How do I center align navbar in CSS?

display: flex; justify-content: center; Will center your navbar, if you remove the width: 100% and the float: left . Show activity on this post. Give display:inline-block to li and text-align:center; padding:0; to ul tag.


1 Answers

Make each item and the ribbon ends display:inline-block, then use text-align:center on the parent.

like image 119
SpliFF Avatar answered Dec 08 '22 12:12

SpliFF