CODEWITHSUNDEEP
csshtml
Sebastian
Sebastian

Reputation: 517

Center logo in html5 nav

So I'm trying to center a logo in my nav section in html5. 

  <header>
    <div class="container1">
       <nav>
           <div class="logo">Logo</div>
       </nav>
    </div>
  </header>

​
http://jsfiddle.net/RbctB/

Any suggestions? Thanks in advance!

Upvotes: 0

Views: 1627

Answers (5)

Daniel
Daniel

Reputation: 2014

As the guys said above, this is just another way of saying the same.

.logo {
    float: left; /*remove */
    margin: 0 auto; /*add */
}

Upvotes: 0

Sonhja
Sonhja

Reputation: 8448

First:

Erase this lines:

margin-left: auto;
margin-right: auto;

at your #container1 style.

Second:

At your .logo style, erase:

float: left;

And add:

margin: 0 auto;

Can I suggest you to erase all styles that you don't use for clarifying code?

Hope this solves your problem.

Upvotes: 0

Ian Devlin
Ian Devlin

Reputation: 18870

Add margin:0 auto; to .logo and remove the float:left.

Also you are not using the nav element correctly, as it should contain navigation which it currently does not.

Upvotes: 0

jsweazy
jsweazy

Reputation: 1621

Remove your float: left; and add margin: 0 auto;

http://jsfiddle.net/RbctB/2/

Upvotes: 2

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324610

You can't use float:left and expect to be able to center it.

By far the easiest way to center an element horizontally is by having its container use text-align:center and the affected element uses display:inline-block (and optionally text-align:left to override the container's alignment of text)

Upvotes: 1

Related Questions