CSS Center Float

Question

Just a quickie, i am probably being silly here but anyway:

I have a navigation that is centrally positioned with margins, this has a list of links, the problem i am having is that because all of my <li> classes are given the css: float:left they align on the left.

E.G:

nav example

What i would like to know is if there is any way to center these?

Thanks

CSS:

section#nav {
    height: 45px;
    margin-bottom:5px;
    text-align:center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}
nav {
    max-width: 700px;
    height: 45px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    margin: 0 auto;
}

nav ul {
    padding:12px 15px;
    margin:0 auto;
    text-align:center;
    overflow:hidden;
}

nav ul li {
    font-size:14px; 
    float:left;
}

nav ul li a {
    color: #FFFFFF;
    margin:0 10px;  
    transition: all 0.5s ease-out !important; 
    -moz-transition: all 0.5s ease-out !important;
    -ms-transition: all 0.5s ease-out !important; 
    -webkit-transition: all 0.5s ease-out !important; 
    -o-transition: all 0.5s ease-out !important;
}

nav ul li a.nav-path-selected {
    border-bottom:1px #ffffff solid;
}

nav ul li a.nav-path-selected {
    border-bottom:1px #ffffff solid;
    color:#FFFFFF !important;
}

nav ul li a:hover {
    color:#CCCCCC !important;
    transition: all 0.5s ease-out !important; 
    -moz-transition: all 0.5s ease-out !important;
    -ms-transition: all 0.5s ease-out !important; 
    -webkit-transition: all 0.5s ease-out !important; 
    -o-transition: all 0.5s ease-out !important;
}

HTML:

<section id="nav">
  <nav>
    <ul class="nav">
      <li class="nav-selected nav-path-selected">
        <a class="nav-selected nav-path-selected" href="/">Home</a>
      </li>
      <li>
        <a href="/about/">About Us</a>
      </li>
      <li>
        <a href="/opportunities/">Opportunities</a>
      </li>
      <li>
        <a href="/inspiration/">Inspiration</a>
      </li>
      <li>
        <a href="/members/">Members</a>
      </li>
    </ul>
  </nav>
</section>

João Mosmann · Answer 1 · 2012-07-26T23:13:12.957

1

You can something like this

ul{
    display:block;
    width:100%;
    text-align:center;
}

ul>li{
    display:inline;
}

Using display:inline instead display:inline-block may don't affect in appearance, but allow display correctly on IE 7

check here jsfiddle.net/kmcYE/2

edited Jul 26 '12 at 23:13

answered Jul 26 '12 at 22:57

João Mosmann

2,884
19
25

score 0 · Answer 2 · answered Jul 26 '12 at 22:55

0

Put your < ul > element inside a < div > and then size and center the div on the page. As long as you set the div to an explicit width value (such as the width of your menu items) and then set the right and left margins of the div to auto, it will auto center.

answered Jul 26 '12 at 22:55

colonelclick

2,165
2
24
33

Remember to use clear:left or clear:both to
– João Mosmann Jul 26 '12 at 22:58

score 0 · Answer 3 · answered Jul 26 '12 at 22:59

0

The only adjustment needed if on your li css:

See this working Fiddle Example.

ADD

display:inline-block;

REMOVE

float:left;

answered Jul 26 '12 at 22:59

Zuul

16,217
6
61
88

display:inline-block can cause issues in IE7 – João Mosmann Jul 26 '12 at 23:01
@JoãoMosmann Have you looked at the CSS used? IE7 isn't an issue, otherwise this menu will never work as is :) – Zuul Jul 26 '12 at 23:05
My comment is just for knowledge :) But just because he is using CSS3 and HTML5 tag don't means that he dont pay attention to IE7 :P He can be using HTML5shiv – João Mosmann Jul 26 '12 at 23:10
@Downvoter: The reason would be nice! One can't understand what's wrong if no one points it out. – Zuul Jul 26 '12 at 23:14

score 0 · Answer 4 · answered Jul 26 '12 at 23:00

0

Give nav ul a display: inline-block; property. This will shrink the list to the width of its contents and center it horizontally in its containing element.

Example: http://jsfiddle.net/VMqUe/

answered Jul 26 '12 at 23:00

Aaron

5,137
1
18
20

score 0 · Accepted Answer · answered Jul 27 '12 at 16:41

Thank you all, I have used a combination of your answers to build the solution:

nav ul {
    padding:12px 15px;
    margin:0 auto;
    text-align:center;
    overflow:hidden;
}

nav ul li {
    font-size:14px; 
    display:inline-block;
    display:inline;
}

CSS Center Float

5 Answers5