Vertical align middle on an inline-block anchor tag

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

Answer 1

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

Answer 2

The cleanest and most consistent way I found is this

display: grid;
place-items: center;

https://jsfiddle.net/j8bktum9/

Answer 3

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

Answer 4

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 5

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.