html - div 内の要素を垂直方向に揃える

Question

私はそれでかなり長い間苦労しています。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>

Answer 1

この問題を解決するには、

1. <span>タグ内のテキスト コンテンツのラップ。
2. そして、 andタグに追加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説明のためのものです。

Answer 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;">

Answer 3

これをすべての画像タグに追加します。

style='vertical-align:middle;'

デモ