Question

我已经看到答案''Vertical Align in a 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>

我的问题是要获得“Some Text”侧和图像中间的

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

Answer 1

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

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

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

1 个答案: