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%;}

How it looks at the moment

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.

You should search this site instead of posting first as this question has been asked countless times before. — Ruddy, Feb 25 '15 at 14:16
I did search the site! all the answers i found seem to use vertical-align which i could not get to work. Asking a question on here is always my last resort. Your assumption that i did not search for an answer is incorrect. — Neil, Feb 25 '15 at 14:30
Yes, I can tell you searched the site. [Because this clearly doesn't answer your question at all with pretty much the same title](http://stackoverflow.com/questions/10437643/vertical-align-middle-on-an-inline-block-anchor-tag)..... Like I said, its not hard to do a quick search. I found that in less than 1 minutes search. — Ruddy, Feb 25 '15 at 14:36
Yeah... like i said, I did!! Why would i waste my time writing a question if i could find the answer on google! I guess your trying to avoid duplication for some purpose... maybe to reduce the size of the site (I don't really know what you are trying to achieve) What your actually doing is adding something truly pointless on here (Your comment) if you don't want to or can't answer a question then how about you just don't! — Neil, Feb 25 '15 at 14:58
I am making you aware to the fact that having a search around the site is extremely useful before posting a question. By all means think that my comment is pointless but that would be incorrect. You should just take on board what I said in my first comment as it is **useful** information. Also it is useful to us if you post what you have tried into your question, that way answer will tend to explain where you went wrong with the given method you tried to implement. — Ruddy, Feb 25 '15 at 15:03
Are you reading what I'm saying? I am aware thats searching for help is useful and frankly a lot more convenient than writing a question and waiting for and answer! It is quite annoying having someone repeatedly tell you something you already know.. I can see your struggling to grasp that your patronising assumption may be (definitely is) incorrect so maybe we should stop this debate, if i ever forget how to search for things though i will defo be in touch ;) — Neil, Feb 25 '15 at 15:18
Why does this question exist if you know how to search the site? But yes will should stop commenting now, always around if you want any help with the sites search feature. — Ruddy, Feb 25 '15 at 15:20
http://stackoverflow.com/questions/25457954/vertical-align-span-text-inside-inline-block-div http://stackoverflow.com/questions/5932201/how-to-vertical-align-an-inline-block-in-a-line-of-text http://stackoverflow.com/questions/18485378/vertically-centering-text-within-an-inline-block http://stackoverflow.com/questions/24760975/how-to-vertically-align-text-in-an-inline-block-td http://stackoverflow.com/questions/25505263/vertically-align-text-when-using-inline-block http://stackoverflow.com/questions/25459739/vertical-align-doesnt-work-in-inline-block — Neil, Feb 25 '15 at 15:25
I looked at all these.. none of which answered my question or provided an answer that worked for me. I did look at more and was unable to find an answer so i posted the question myself! I was trying for an hour and a half without success which is the only reason it annoyed me being told to do a search! Sorry for the stupid comments tho as I understand where you are coming from! — Neil, Feb 25 '15 at 15:30

score 4 · Accepted Answer · answered Feb 25 '15 at 14:17

4

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

answered Feb 25 '15 at 14:17

Sachin

37,535
7
82
97

favorite solution as it is supported in most of the devices. – Vishal Kumar Sahu Sep 20 '17 at 18:39

score 1 · Answer 2 · answered Feb 25 '15 at 14:33

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>

Vertically align text to middle of inline-block

2 Answers2