The simplest solution is to use the vertical-align
property as follows:
i {
margin-left: 10px;
font-size: 30px;
height: 30px;
vertical-align: middle;
}
see demo at: http://jsfiddle.net/audetwebdesign/9ATq8/
Note: It is necessary to specify height: 30px
for the i
element and line-height: 40px
of the parent container, otherwise, any default values may not work as expected.
CSS table-cell also works but the added complexity is not needed in this case.