将图像与 <li> 中的文本垂直对齐答案

【问题标题】：Vertically align image with text within <li>将图像与 <li> 中的文本垂直对齐
【发布时间】：2013-09-22 10:38:53
【问题描述】：

我正在尝试将文本与图像垂直对齐（反之亦然？）。这是一些代码：

<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，我可以不将其用作背景。我怎样才能对齐它？谢谢。

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

【问题讨论】：

'将文本与图像垂直对齐'并不能很好地描述您想要的内容，您希望它们如何对齐？
你为什么在 li 中使用
标签。这会将文本移动到下一行。并且图像的左浮动属性在这里可能会出现问题。

标签： html css

【解决方案1】：

我刚刚添加了垂直对齐：中间/顶部/底部；图像和工作。

【讨论】：

【解决方案2】：

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

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 */
}

【讨论】：

@JonP 使用一个段落和  标签将其分成几行，它会起作用。（如小提琴所示）
  在语义上与 不同。进一步更多如果描述是从包含多个段落的数据库中提取的。另请参阅：stackoverflow.com/questions/1726073/…
真的没问题。该解决方案唯一需要的是将所有文本（无论形式）包含在inline-block 元素中（我使用p 和disply: inline-block），这将与图像对齐。内容可以在不同的p 标签中，或者其他任何东西。只要所有内容都包含在inline-block 容器中。
为我工作，太棒了

【解决方案3】：

您可以在li 元素上使用vertical-align: top; 声明。但是由于要浮动图像，因此您需要使用 clearfix。

【讨论】：

【解决方案4】：

我不是使用这些表格显示选项的忠实粉丝，使用它们时有一些糟糕的跨浏览器体验。

在我看来你可以在这里使用 line-height 。像这样的：

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

div ul li {
    line-height: 60px;
}    

img {
    float: left;
    margin: 0 0 10px 0;
    padding: 2px;
}

还有一个小提琴：http://jsfiddle.net/qjSpj/1/

【讨论】：

【解决方案5】：

只需从img 中删除 标记和float:left 即可。

http://jsfiddle.net/BA2Lc/的演示

【讨论】：

【解决方案6】：

您可以将样式从默认显示修改为内联：

p {display: inline}

【讨论】：