Css img和x2B的垂直对齐；div中的内联块

我试图垂直对齐

img

和

内联bloc div

，但不知道如何对齐

下面是我所做工作的JSFIDLE链接：

如您所见，绿色图像和橙色div没有垂直对齐。我不知道怎么做。 此外，填充不适用于橙色区域（由于

位置：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 -->

---

我向你提出一个简单的解决办法。您只需在橙色框（文本div）中添加边距即可：

这两个元素在同一个框中，但大小不同，这是最简单的修复方法。 顺便说一下，填充物对我有用，但它使橙色的盒子变大了

---

注意：我使用Chrome，这可能是浏览器的问题吗？

在问题中也包括HTML和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;
}

    margin-top: 10px;