List Text Sitting at Bottom of Header and Negative Margin Has No Effect

[deldalton]

I'm a little stuck with something that should be really simple. I can't figure out the problem.

 

I have a header, containing an img element and an ol element. Although I can get the ol and list elements to sit inline, beside the img element, the list elements' text sits at the bottom of the header. I'm having trouble sitting the text in the center of the header. I've tried negative margins on the ol element, li elements, and the nav element. But, it has no affect.

 

You'll see I've thrown in inline-block display attribute values on everything just to try and get this to work.

<header>     <img src="img/newLogo.png"/>     <nav>          <ol>               <li>Link 1</li>               <li>Link 2</li>               <li>Link 3</li>          </ol>     </nav></header> 

header {    width: 100%;    height: 100px;    background-color: white;    opacity: 0.9;    position: fixed;    z-index: 1;}header img {    height: 100px;}nav {    display: inline-block;}ol {    font-size: 1em;    display: inline-block;}li {    display: inline-block;} 

I'd be grateful for any pointers.

 

Thanks.

 

[Ingolme]

You can change the vertical-align of the image to middle or top.

 

Since the elements are inline, how they're positioned relative to each other is by their vertical-align property.

[deldalton]

You can change the vertical-align of the image to middle or top.

 

Since the elements are inline, how they're positioned relative to each other is by their vertical-align property.

 

Thank you!

 

I've never used the vertical-align property, as I've never normally had an issue positioning elements. I'm extremely glad you've introduced us.