DIV中心div和右div

Question

StackOverflow的。 我想像这样制作html和css布局：

我做错了，容器与徽标的颜色相同高度。

我尝试了很多来自互联网和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;
}

我所看到的：

所以按钮没有垂直对齐。

而且我 代码放在＆＃34;徽标＆＃34; 代码之前。它在逻辑上是对的，我可以避免这种情况吗？

我在那里挣扎了大约5个小时。很高兴得到任何帮助： - ）

Answer 1

您可以在top: 50%容器上使用transform: translateY(-50%)和.fs-login：

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，您是否使用自动修复器。

Answer 2

这是使用浮动的solution：

header {
    margin:10px 10px 10px 10px;
    position:relative;
    overflow: hidden;
}
.fs-logo {
    margin-top: 50px;
    text-align:center;
}
.fs-login {
    float: right;
}