html - 中间div和右div在里面的DIV

Question

计算器溢出。我想像这样制作 html 和 css 布局:

我打错了，容器与 Logo 的高度相同。

我尝试了来自互联网和 stackoverflow 的许多变体，但没有一个符合我的需要。

我停在什么地方:

HTML

<header>
    <div class="fs-login">
        <a href="#" class="btn btn-info">Вход</a>
        <a href="#" class="btn btn-primary">Регистрация</a>
    </div>
    <div class="fs-logo">
        <img src="siteimg/eremademo.png"/>
    </div>
</header>

CSS

header {
    margin:10px 10px 10px 10px;
    position:relative;
}
.fs-logo {
    text-align:center;
}
.fs-login {
    position:absolute;
    right:10px;
    height:100%;
    vertical-align:middle;
}

我看到了什么:

所以按钮没有垂直对齐。

而且我不高兴，在 HTML 中“按钮”代码放在“ Logo ”代码之前。这在逻辑上是不对的，我可以避免这种情况吗？

我为此苦苦挣扎了大约 5 个小时。很乐意提供任何帮助:-)

Answer 1

您可以在 .fs-login 上使用 top: 50%，并结合 transform: translateY(-50%)容器:

header {
    margin:10px 10px 10px 10px;
    position:relative;
}
.fs-logo {
    text-align:center;
}
.fs-login {
    position:absolute;
    right:10px;
    top: 50%;
    -webkit-transform-origin: center center;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

<header>
    <div class="fs-login">
        <a href="#" class="btn btn-info">Вход</a>
        <a href="#" class="btn btn-primary">Регистрация</a>
    </div>
    <div class="fs-logo">
        <img src="http://placehold.it/140x180"/>
    </div>
</header>

旁注:-webkit- 是针对 Safari 的，如果您不使用 Autoprefixer。