content vertical alignment inside li

Question

I have HTML code and I want to align content in li-element. I have image and text info in the li-element.

I tried vertical-align: middle for li-element, but it doesn't work

li img {
  float: left;
  display: block;
  margin-right: 20px;
  margin-bottom: 15px;
  width: 75px;
  height: 75px;
}

<ul>
  <li>
    <img src="images/1.jpg" alt="">
    <a class="post-title" href="#">Lorem Ipsum</a>
    <p class="post-date">March 05, 2015</p>
  </li>
  <li>
    <img src="images/1.jpg" alt="">
    <a class="post-title" href="#">Lorem Ipsum</a>
    <p class="post-date">March 05, 2015</p>
  </li>
</ul>

`li { height: 75px; line-height: 75px; }` – domsson Mar 14 '17 at 14:37 — domsson, Mar 14 '17 at 14:37

score 0 · Answer 1 · answered Mar 14 '17 at 14:42

You could alter your HTML slightly and use the display:table-cell trick. Flexbox might something to look into as well, thought it's not as widely supported yet.

HTML

<ul>
    <li>
        <div>
            <img src="images/1.jpg" alt="">
            <a class="post-title" href="#">Lorem Ipsum</a>
            <p class="post-date">March 05, 2015</p>
        </div>
    </li>
    <li>
        <div>
            <img src="images/1.jpg" alt="">
            <a class="post-title" href="#">Lorem Ipsum</a>
            <p class="post-date">March 05, 2015</p>
        </div>
    </li>
</ul>

CSS

li div {  
    height: 200px; /*or whatever you need */
    display: table-cell;
    text-align: center;
    vertical-align: middle;
}

fiddle example

content vertical alignment inside li

1 Answers1