html - Header: Logo to the left, nav to the right. (Vertical aligned to the center) -


I'm having trouble aligning my navigation to the right of the header. While searching on the web, I think the problem is because I am aligning objects vertically in the center and the float option is not working with it.

Any clues?

See:

HTML:

  & lt; Header & gt; & Lt; Div class = "logowrapper" style = "padding-left: 1em;" & Gt; & Lt; Div class = "logo" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Nav> & Lt; A href = "#" & gt; Some links & lt; / A & gt; & Lt; / Neo & gt; & Lt; / Header & gt;  

CSS:

  header {background color: #EEAAA; Height: 80px; Margins: 10px; } .logowrapper {display: table-cell; Height: 80px; Vertical-row: middle; Text align: center; } .logo {display: inline-block; Background-image: url ("http://placehold.it/250x40"); Width: 250px; Height: 40px; } NAV {true: 0 px; Exhibit: Table-Cell; Vertical-row: middle; } NAV A {color: black; Text-decoration: None; }  

desired effect:

desired effects

You & lt; Nav> One width and change text-align: left; Text-align with: center; or this center will not read:

  nav {display: table-cell; Vertical-row: middle; Text align: center; Width: 400px; }  

Result: Enter image details here

< H1>

Comments

Popular posts from this blog

java - org.apache.http.ProtocolException: Target host is not specified -

java - Gradle dependencies: compile project by relative path -

ruby on rails - Object doesn't support #inspect when used with .include -