-1

我现在为此苦苦挣扎了一段时间。我有 2 个浮动 div，我想将文本与这些 div 中的图像对齐。

这是一个JSFiddle

<div data-role="content" class="content">
    <ul data-role="listview" data-inset="true">
        <li data-icon="nf-arrow-r">
            <div style="overflow:hidden;">
                <div style="float:left;">
                    <img src='http://images.lecouffe.org/wp-content/uploads/Chronometre.png' width='22' height='22' />08h00 - 12h30
                    <br/>
                    <img src='http://images.lecouffe.org/wp-content/uploads/Chronometre.png' width='22' height='22' />13h00 - 18h00</div>
                <div style="float:right;font-weight:normal;color:blue;">9h30 +
                    <img src='https://si0.twimg.com/profile_images/378800000050266964/cfbc5ac04a7ced31fcbb9dfcf1649d65.png' width='32' height='32' />
                </div>
            </div>
        </li>
    </ul>
</div>
4

3 回答 3

3

您可以通过以下方式解决此问题

  1. 将文本内容包装在<span>标签内。
  2. 然后通过添加vertical-align: bottom;到您的<span>和<img>标签。

HTML：

<img src='http://images.lecouffe.org/wp-content/uploads/Chronometre.png' width='22' height='22' /><span>08h00 - 12h30</span>

CSS：

img, span{
    vertical-align: bottom;
}

工作样本

注意：工作样本border只是为了说明。

于 2013-09-06T17:27:16.360 回答
2

一个简单的解决方案是使用table和table-cell显示。我已经对单元格进行了着色，所以它会很清楚。

jsFiddle 演示

我不得不改变一些样式，但不是 DOM。

<div style="font-weight:normal;color:blue;background:red;
            vertical-align: middle; display: table-cell;
            height:100%; text-align:right;">
于 2013-09-06T17:29:53.180 回答
0

在所有图像标签中添加它。

style='vertical-align:middle;'

演示

于 2013-09-06T17:23:31.027 回答