Question

我正在尝试垂直对齐img和inline bloc div，但无法确定如何。

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

如您所见，绿色图像和橙色div不是垂直对齐的。我不知道该怎么做。更重要的是，填充不适用于橙色集团（由于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，这可能是浏览器问题吗？

在div

1 个答案: