6

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

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

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

4

6 回答 6

17

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

工作小提琴 测试： 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 */
}
于 2013-09-17T23:22:47.463 回答
1

只需删除<p>标签和float:leftfromimg就可以了。

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

于 2013-09-17T20:29:28.870 回答
1

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

在我看来，您可以在这里使用 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/

于 2013-09-17T20:31:47.437 回答
0

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

p {display: inline}
于 2013-09-17T20:29:13.350 回答
0

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

于 2013-09-17T20:32:10.820 回答
0

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

于 2015-02-14T08:45:15.757 回答