コンテンツの垂直方向の配置内側

Question

私はHTMLコードを持っており、コンテンツをli -elementに揃えたいと考えています。 li要素にイメージとテキスト情報があります。

私はli -elementためvertical-align: middleを試してみましたが、それは

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>

Answer 1

を動作しませんあなたは少しあなたのHTMLを変更し、display:table-cellトリックを使用することができます。 Flexboxも見ているかもしれませんが、まだそれほど広くサポートされていないと思いました。

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