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

我已经看到了答案“”的答案 我的问题是如何让图像和文本并排，并且文本位于图像的中间

我的密码

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>

一些文本

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

---

**注意：*我知道我不应该在这里使用内联块。但我不知道如何获得它。

img应该具有垂直对齐属性

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

你在找这个吗？-@Lonelysomething like？不太确定。我只在img标记上真正使用过垂直对齐属性。给我一个关于jsfiddle的例子，在标题标记旁边的中间没有对齐文本。右边的文本看起来有点偏离的原因是因为不同的字体大小。一个是20px和t另一个是15px。试着将第二段标记设置为垂直对齐：中间，这样看起来会好一点。