html - div中的垂直对齐元素

Question

我现在为此苦苦挣扎了很长一段时间。 我有 2 个 float 的 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>

Answer 1

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

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

Working Sample

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