3

「 Divで垂直に整列」への回答を見て 、Adamの回答に従いました。私の問題は、画像とテキストの両方を並べて、テキストを画像の中央に配置する方法です。

私のJSFiddle

私の試したコード

CSS

.outerContainer {
    display: table;
    width: 100%; /* width of parent */
    height:200px;
    overflow: hidden;
    border:1px solid green;
}
.outerContainer .innerContainer {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    margin: 0 auto;
}

HTML

<div class="outerContainer">
          <div class="innerContainer">
            <div >
             <img src='http://icons.iconarchive.com/icons/danleech/simple/512/facebook-icon.png' height=50px width=50px>
                <p style='display:inline-block;font-size:10px;'>Some Text</p>

            </div>
          </div>
        </div>

私の問題は、その「いくつかのテキスト」側と画像の中央を取得することです

**注:** ここでインライン ブロックを使用すべきではないことはわかっています。しかし、私はそれを取得する方法がわかりません。

4

1 に答える 1

5

img には、vertical align プロパティがあるはずです。

<img src='http://icons.iconarchive.com/icons/danleech/simple/512/facebook-icon.png' height="50" width="50" style="vertical-align:middle;">
于 2013-09-04T11:04:11.673 に答える