html - 如何在div中并排垂直对齐图像和文本

Question

我已经看到答案'' Vertical Align in a Div 的答案 "并遵循了 Adam 的回答。我的问题是如何将图像和文本并排放置，并且文本位于图像的中间。

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

我的问题是获取“一些文本”一侧和图像的中间

**注意:**我知道我不应该在这里使用内联 block 。但我不知道如何得到它。

Answer 1

img 应该具有垂直对齐属性。

<img src='http://icons.iconarchive.com/icons/danleech/simple/512/facebook-icon.png' height="50" width="50" style="vertical-align:middle;">