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

Question

我已经看到了“在 Div 中垂直对齐 ”的答案，并遵循了亚当的答案。我的问题是如何将图像和文本并排放置，并且文本位于图像的中间。

我的 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>

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

**注意：**我知道我不应该在这里使用 inline-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;">