Question

我现在已经挣扎了很长时间了。我有2个浮动div，我想将文本与这些div中的图像对齐。

<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>

Answer 1

您可以通过

解决此问题

将文字内容包装在<span>标记内。
然后将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;
}

Working Sample

注意：工作样本只有border来说明。

Answer 2

一个简单的解决方案是使用table和table-cell显示。我给细胞上色了所以它很清楚。

jsFiddle Demo

我不得不改变一些风格，但不是DOM 。

<div style="font-weight:normal;color:blue;background:red;
            vertical-align: middle; display: table-cell;
            height:100%; text-align:right;">

Answer 3

在所有图片代码中添加此内容。

style='vertical-align:middle;'

Demo

div中的垂直对齐元素

3 个答案: