Vertically align text to middle of inline-block

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">
        <a href="#" class="custom-button width-100">Login</a>
    </div>
    <div class="col-md-4">
        <a href="#" class="custom-button width-100">Menu</a>
    </div>
    <div class="col-md-4">
        <a href="#" class="custom-button width-100">Contact</a>
    </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"> <a href="#" class="custom-button width-100">Login</a> </div> <div class="col-md-4 col-xs-4"> <a href="#" class="custom-button width-100">Menu</a> </div> <div class="col-md-4 col-xs-4"> <a href="#" class="custom-button width-100"><span>Cont<br/>act</span></a> </div> </div>