I am struggling to vertically align the text within an "a" tag in the same manner as the "button" tag. My goal is for my links and buttons to have a consistent look, but handling multiple lines of text poses a challenge when using line-height. I have tried using CSS properties like display: inline-block and vertical-align: middle, but haven't found a solution that works effortlessly across all browsers.
a,button {
display: inline-block;
-moz-box-sizing: border-box;
width: 150px;
height: 150px;
vertical-align: middle;
border: 1px solid #000;
text-align: center;
}
To see my code in action, check out the jsfiddle link below:
While I have managed to achieve the desired alignment by nesting a span inside the "a" tag and setting specific display properties, this workaround does not function properly 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;
}
If possible, I am looking for a simple CSS-only solution that will effectively align the text within both "a" tags and "button" elements.