you have to use both the height
and line-height
property to achieve the same effect in IE.
Check the DEMO.
Question
I have the following CSS to control three a
tags which should have vertically central text, however they appear at the top of the button. It's easier to see result.
CSS Code:
color: #fffae6;
border: 1px solid #fff;
outline: 4px solid #242424;
-moz-transition: background 500ms ease-in-out;
-ms-transition: background 500ms ease-in-out;
-o-transition: background 500ms ease-in-out;
transition: background 500ms ease-in-out;
padding: 5px 0;
-webkit-transition: background 500ms ease-in-out;
background: #242424;
font-size: 1.7em;
display: block;
margin: 0 15px;
In chrome:
In IE:
Any ideas?
Solution
you have to use both the height
and line-height
property to achieve the same effect in IE.
Check the DEMO.
OTHER TIPS
Please use line-height, as per your height of the button. I hope it will work