Jump to content

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


Recommended Posts

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.

 

Link to post
Share on other sites

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.

  • Like 1
Link to post
Share on other sites

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.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...