Vertical align middle on an inline-block anchor ta

Question

I have a need for my links and buttons to look the same, but I've been unable to vertically align the text within an "a" tag in the same manner as the "button" tag. It is important to note that the tags need to be able to handle multiple lines of text (so line-height will not work).

a,button {
  display: inline-block;
  -moz-box-sizing: border-box;
  width: 150px;
  height: 150px;
  vertical-align: middle;
  border: 1px solid #000;
  text-align: center;
}

See the jsfiddle below:

http://jsfiddle.net/bZsaw/3/

As you can see, I can get it to work with a combination of a span tag inside and setting "display:table" to the "a" and setting "display:table-cell" and "vertical-align:middle" to the span, but that doesn't work in IE7.

a,button {
    width: 150px;
    height: 150px;
    border: 1px solid #000;
    text-align: center;
}

a {
    display: table;
    -moz-box-sizing: border-box;
}

a span, button span {
    vertical-align: middle;
    text-align: center;
}

a span {
    display: table-cell; 
}

Looking for a simple CSS only solution.

Answer 1

Use line-height:150px; and display-inline:block;

Answer 2

The only reliable way to I've found align text vertically and allow wrapping of the text if it gets too long is with a 2 container approach.

The outer container should have a line height of at least double that specified for the inner container. In your case, that means the following:

a {
    width: 150px;
    height: 150px;
    border: 1px solid #000;
    text-align: center;
    line-height: 150px;
    display: block;
}

a span {
    display:inline;
    display:inline-table;
    display:inline-block;
    vertical-align:middle;
    line-height: 20px;
    *margin-top: expression(this.offsetHeight < this.parentNode.offsetHeight ? parseInt((this.parentNode.offsetHeight - this.offsetHeight) / 2) + "px" : "0");
}

Add float left on the a tag if you want everything inline. Here's the updated example with long text in the A tag too.. http://jsfiddle.net/bZsaw/13/

You can set the line height on the span to whatever you like and if it is less than half of the line height of the parent, it will center AND allow text wrapping if your text exceeds the parent container width. This works on all modern browsers as far as I know.

Answer 3

If your text won't be larger than the width of the box you could set the line-height equal to the height of the box.

line-height:150px;

Answer 4

All answers are not updated,and all of them are basically hacks, you should use new CSS3 features, in this case flexbox

a,button {
  -moz-box-sizing: border-box;
  width: 150px;
  height: 150px;
  display:flex;/*CSS3*/
  align-items:center;/*Vertical align*/
  justify-content:center;/*horizontal align*/
  border: 1px solid #000;
}

<a href="#"><span>Testing 1,2,3</span></a>
    <button><span>Testing 1,2,3</span></button>

That should work for your problem, note that align-items and justify-content will behave the opposite if set flex-direction:vertical, default is flex-direction:row.

Feel free to use, all browsers support it caniuse.com/#search=flex

Also check out the free and excellent course flexbox.io/ he is the best teacher at this

Also check out css-grid, also new in CSS3