How to center a ul CSS


Tags: html,css,html-lists,centering

Problem :

I have a ul that I am using for my page navigation and I would like to center it but I can't figure out how to do it. Here is my code:

<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">What Are Drones</a></li>
<li><a href="#">How Do Drones Work</a></li>
<li><a href="#">Buying a Drone</a></li>
 <li><a href="#">About Us</a></li>
</ul>


#nav { list-style-type: none; height: 100px; padding: 0; margin: 0; }
#nav { list-style-type: none; height: 100px; padding: 0; margin: 0; }
#nav li { display:inline-block; position: relative; padding: 0; line-height:    100px; background: #666 url(nav-bg.png) repeat-x 0 0; }
#nav li:hover { background-position: 0 -40px; }
#nav li a { display: block; padding: 0 15px; color: #fff; text-decoration: none; font-size: 50px; font-family: 'Cuprum', sans-serif; }
#nav li a:hover { color:#0F0 }
#nav li ul { opacity: 0; position: absolute; left: 0; width: 8em; background: #63867f; list-style-type: none; padding: 0; margin: 0; }
#nav li:hover ul { opacity: 1; }
#nav li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
#nav li:hover ul li { height: 30px; line-height: 30px; }
#nav li ul li a { background:#666 }
#nav li ul li a:hover { background:#666 }
#nav { background-color:#666; }


Solution :

It really depends on what you're trying to do, your constraints and how you are trying to build your site but for me setting text-align:center; on your #nav element centers all of the individual menu elements relative to which row they appear on.

You can read more here if you need to get into the finer arts of it: https://css-tricks.com/centering-list-items-horizontally-slightly-trickier-than-you-might-think/

But as they say this is pretty simple in modern HTML. It's only if you need to support older browsers for some reason or some other quirky setup that it gets more complex.


    CSS Howto..

    css: how to get the browser's default font family

    Boostrap: How to “stick” a button over an image when re-sizing

    How to solve this HTML/CSS bug? [closed]

    How does the :not selector work to block older browsers and for which browsers does it work? [closed]

    How to background css with php variable

    How can I fix my CSS code to work with IE (where it shows scroll bars)?

    How much media queries?

    CSS Selector-How to locate Parent Element

    How to apply CSS correctly to iFrame?

    Using pure Javascript to show contents of list on click only on mobile and show initially on desktop

    How do I remove an extra overlay layer on p element?

    How to adjust the height of a series of DIVs by CSS

    How to implement fluid font size using pure CSS

    How to replace image on click and reset to original after exiting hover state

    How to stretch text in CSS like microsoft word?

    How can I place HTML in a JavaScript string and have it validate?

    How to change CSS property with jQuery?

    How do I justify a horizontal list?

    I have a standard table with text inside. How do I vertical align this?

    how does CSS determine which way to animate a transition?

    How to add multiple css rules to minimize browser reflows?

    How to make the background color transparent

    How to align HTML horizontaly using CSS

    How to have an image overlap the edge of a div

    How to find Sharepoint 2013 CSS Classes?

    customize bootstrap widths do not know how

    How to set border to 0 in this table

    How to make the headline (H1 with lines on the sides) with CSS only

    why image show space and go right, it should be fill up the gap

    slideshow banner without using flash