css - CSS: div で画像とテキストを垂直方向に中央揃えにする

Question

単一の div の中央に画像とテキストを垂直方向に中央揃えしようとしています (Web ページの上部にあるロゴとサイト名など)。画像は左側にあり、周囲にパディングがあり、テキストは画像のすぐ隣にあり、div の垂直方向の中央にも配置されます。

この画像は結果を視覚化します。

インターネット上の多くのコードを試しましたが、機能しません。どんな助けでも大歓迎です。ありがとう！

Answer 1

あなたのイメージに追加vertical-align: middleします。これは、それを例示するjsfiddleです。

Answer 2

このようなもの？

http://jsfiddle.net/gy22f/6/

display table と table-cell を使用して、垂直方向の配置が適切に機能するようにしました。

Answer 3

Joãoの答えへのほんの少しの追加（コメントを投稿できません）：

---

タグを使用している場合は、<h1>タグに次を追加する必要があります<h1>。

display: inline;
vertical-align: middle;

ライブデモ: jsFiddle

複数行対応: jsFiddle *追加*

追加display: inline-block;するだけでは、テキストが正しく配置されません。

Answer 4

これを試してください：それは私のために働いた

<div style="border:1px solid black;">
            <table >
                <tr>
                    <td style="margin:10px 0px 10px 10px;border:1px solid black">
                        <img src="http://www.instablogsimages.com/images/2008/01/16/vw-logo-img-routan-van_5965.jpg" style="width:100px;height:100px;" alt=""/>
                    </td>
                    <td>
                        <div style="margin-top:auto;margin-bottom:auto;border:1px solid black;">
                            Some Text
                        </div>
                    </td>
                </tr>
            </table>
        </div>