CSS Вертикальное выравнивание Свойство не работает

Question

Я хотел бы сосредоточить текст в bartext и кнопке в пределах бар класс. Возможно ли это с помощью свойства вертикального выравнивания? Ниже у меня есть ссылка на версию моей проблемы.

http://codepen.io/anon/pen/GNwXjz

Отрывок:

.bar { 
 
    display: inline-block; 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: black; 
 
    color: white; 
 
    font-style: italic; 
 
    font-size: 18px; 
 
    text-align: center; 
 
} 
 
.bartext{ 
 
    display: inline-block; 
 
    vertical-align: ; 
 
} 
 
.button1 { 
 
    display: inline-block; 
 
    vertical-align: ; 
 
}

<div class="bar"> 
 
    <div class="bartext">This is how you contact us</div> 
 
    <div class="button1">Contact</div> 
 
</div>

Answer 1

Вы можете использовать CSS Flexbox. Применить display: flex к .bar & для вертикального выравнивания используйте align-items: center.

Посмотрите на рабочий фрагмент ниже или посмотрите обновленный Codepen.

.bar { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    width: 100%; 
 
    height: 50px; 
 
    background-color: black; 
 
    color: white; 
 
    font-style: italic; 
 
    font-size: 18px; 
 
    text-align: center; 
 
} 
 
.bartext{ 
 
    display: inline-block; 
 
    vertical-align: ; 
 
} 
 
.button1 { 
 
    margin-left: 5px; 
 
}

<div class="bar"> 
 
    <div class="bartext">This is how you contact us</div> 
 
    <div class="button1">Contact</div> 
 
</div>

Надеется, что это помогает!