CSS Vertical Alignment Property Not Working

Question

I would like to center the text in bartext and button within the bar class. Is this possible with vertical-alignment property? Below I have a link to the codepen version of my problem.

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>

just make the bar as display:flex and set justify-content:Center — Geeky, Dec 15 '16 at 16:15

score 1 · Accepted Answer · answered Dec 15 '16 at 16:15

You can use CSS Flexbox. Apply display: flex to .bar & for vertically aligning it use align-items: center.

Have a look at the working snippet below, or see the updated 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>

Hope this helps!

CSS Vertical Alignment Property Not Working

1 Answers1