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; 
} 

, что я вижу:

Так кнопки не выровнены по вертикали.

А также я не рад, что в HTML код «кнопки» помещается перед «логотипом» кода. Это не логично, я могу избежать этого?

Я борюсь за это около 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, вы не используете Autoprefixer.

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; 
}