CODEWITHSUNDEEP
htmlcssimagealignmentvertical-alignment
RhysE96
RhysE96

Reputation: 197

List with image in between

I have a horizontal list with 5 items in it, in the center list item I have an image. My question is how do I move my other list items up without the image going up and above the screen. Hard to explain but if you see my fiddle.

Snippet:

ul {
  margin: auto;
  text-align: center;
}

li {
  list-style: none;
  display: inline-block;
  margin: -70px 55px 30px 55px; /*if I reduce the top margin the image will be cut from the top */
}

.logo img {
  display: inline-block;
  position: relative;
}
<ul>
  <li>This</li>
  <li>This</li>
  <li><img class=" logo" src="http://placehold.it/350x150"></li>
  <li>This</li>
  <li>This</li>
</ul>

Fiddle

Upvotes: 1

Views: 82

Answers (2)

James
James

Reputation: 189

li {
    vertical-align: middle;
}

but you now need to adjust for your margins (first time here btw)that fiddle, when loads of people on it .. is freaky

Upvotes: 2

kukkuz
kukkuz

Reputation: 42360

Don't use margins - use vertical-align.

See demo below where I use vertical-align: top (the default is baseline):

ul {
  margin: auto;
  text-align: center;
}
li {
  list-style: none;
  display: inline-block;
  vertical-align:top;
}
.logo img {
  display: inline-block;
  position: relative;
  vertical-align:top;
}
<nav>
  <ul>
    <li>This</li>
    <li>This</li>
    <li>
      <img class=" logo" src="http://placehold.it/350x150">
    </li>
    <li>This</li>
    <li>This</li>
  </ul>
</nav>

Upvotes: 3

Related Questions