css - div 内 img+inline-block 的垂直对齐

Question

我正在尝试垂直对齐 img 和 inline bloc div，但不知道如何对齐。

这是我所做工作的 JSFiddle 链接: https://jsfiddle.net/vat2w1s3/4/

如您所见，绿色图像和橙色 div 并未垂直对齐。我不知道该怎么做。此外，填充不适用于橙色 block (由于 position: asbolute 对吗？)

有人有想法吗？

代码如下:

HTML:

<header> <!-- RED -->
    <div class="bloc-div"> 
        <a href="#"> <!-- BLUE -->
            <!-- GREEN -->
            <img class="img" src="https://account.socialbakers.com/default_user.png" alt="some photo"> 
            <!-- ORANGE -->
            <div class="text-div">
                <span class="span1">SOMETHING BIG</span><br/>
                <span class="span2">Small caption</span>
            </div>
        </a>
    </div>
</header>

<!-- BODY IS GRAY -->

和CSS:

body {background: gray;}
a, a:hover, a:active, a:focus { color: inherit; text-decoration: inherit; }
header {
    background: red;
    width: 300px;
    height: 100%;
    position: fixed;
}

.bloc-div a {
    display: block;
    background: blue;
    padding: 1em;
}

.img {
    background: green;
    display: inline-block;
    width:50px;
    height:50px;

    -webkit-border-radius:50px;
    -moz-border-radius:50px;
    border-radius:50px;
    padding:5px;
}

.text-div {
    background: orange;
    display: inline-block;
    text-align: right;
    /* Stick the orange bloc to the right */
    position: absolute;
    right: 0;
}

.span1 {
    font-size: 1.3em;
}

.span2 {
    font-size: 0.8em;
}

Answer 1

我向您推荐一个简单的解决方案。您可以只为橙色框 (text-div) 添加边距:

    margin-top: 10px;

这两个元素在同一个盒子里，但它们的大小不一样，这是最简单的解决方法。顺便说一句，填充对我有用，但它使橙色框更大。

注意:我使用的是 Chrome，会不会是浏览器问题？