Vertically align text to middle of inline-block - html

Question

I am trying to get text to vertically align to the middle but can't seem to get it to work.
HTML:
<div class="row">
<div class="col-md-4">
Login
</div>
<div class="col-md-4">
Menu
</div>
<div class="col-md-4">
Contact
</div>
</div>
CSS:
.custom-button {
color:#ECDBFF;
background-color:#4F0100;
display:inline-block;
height: 220px;
font-family:Verdana, Geneva, sans-serif;
font-size:20px;
font-weight:bold;
text-align:center;
text-decoration:none;
}
.width-100 {width: 100%;}
I have googled quite a bit and tried a couple of things but i can't seem to get the text to go to the middle. can anyone advise what i would need to add/change to get this to work.

Answer 1

If your have a text which is restricted to single line then line-height would be the best solution.
try with this
line-height:220px; /*height of your container */
JsFiddle Demo

Answer 2

You can as well use vertical-align a pseudo element (:before or :after ) and an extra box (inline-block) to allow content to wrap on a few lines : see and run snippet below.
.custom-button {
color: #ECDBFF;
background-color: #4F0100;
display: inline-block;
height: 220px;
font-family: Verdana, Geneva, sans-serif;
font-size: 20px;
font-weight: bold;
text-align: center;
text-decoration: none;
}
.width-100 {
width: 100%;
}
.custom-button:before {
display:inline-block;
content:'';
height:220px;
vertical-align:middle;
margin:-0 -0.25em;;
}
a span {display:inline-block;
vertical-align:middle;
}
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"/>
<div class="row">
<div class="col-md-4 col-xs-4">
Login
</div>
<div class="col-md-4 col-xs-4">
Menu
</div>
<div class="col-md-4 col-xs-4">
<span>Cont<br/>act</span>
</div>
</div>