Vertikale CSS-Ausrichtungseigenschaft funktioniert nicht

Question

Ich möchte den Text in Bartext und Schaltfläche innerhalb der bar Klasse zu zentrieren. Ist dies mit der Eigenschaft der vertikalen Ausrichtung möglich? Unten habe ich einen Link zu der Codepen-Version meines Problems.

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

Snippet:

.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

können Sie CSS Flexbox verwenden. Tragen Sie display: flex auf .bar & auf, um es vertikal auszurichten, verwenden Sie align-items: center.

Werfen Sie einen Blick auf das unten stehende Arbeits-Snippet oder sehen Sie sich das aktualisierte Codepen an.

.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>

hoffe, das hilft!