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:
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:
< H1>
Comments
Post a Comment