html - 在 中垂直对齐图像和文本

Question

我正在尝试将文本与图像垂直对齐(或反之亦然？)。这是一些代码:

<div class="row">
  <div class="col-md-3">col-md-3
    <ul>
      <li><img src="http://placehold.it/60x60"><p>Text Text Text</p></li>
      <li><img src="http://placehold.it/60x60"><p>Text</p></li>
      <li><img src="http://placehold.it/60x60"><p>Text Text Text Text</p></li>
      <li><img src="http://placehold.it/60x60"><p>Text Text</p></li>
      <li><img src="http://placehold.it/60x60"><p>Text Text Text Text Text</p></li>
      <li><img src="http://placehold.it/60x60"><p>Text</p></li>
      <li><img src="http://placehold.it/60x60"><p>Text Text</p></li>
    </ul>
  {# 3 more columns like this #}
</div>

还有 CSS:

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

div ul li {
    display: table-row;
}    

img {
    float: left;
    margin: 0 0 10px 0;
    padding: 2px;
    vertical-align: middle;
}

另外，所有图片都具有相同的固定大小可能很重要，比如示例中的 60x60，我可以不将其用作背景。我怎样才能对齐它？谢谢。

更新:如前所述，我正在寻找位于图片右边缘中间的文本，谢谢。

Answer 1

我的解决方案适用于一行和多行文本。

Working Fiddle 测试:IE10、IE9、IE8、Chrome、FF、Safari

HTML:与您发布的相同

我假设你的意思是中间对齐。如果不是:使用 top | bottom 而不是 middle

CSS

*
{
    padding: 0;
    margin: 0;
}
ul
{
    list-style-type: none;
}

div ul li
{
    margin: 5px;
}    

img
{
    vertical-align: middle; /* | top | bottom */
}
div ul li p
{
    display: inline-block;
    vertical-align: middle; /* | top | bottom */
}