Vertically align text with different font sizes

HTML & CSS
1

Hi all

I have a jsfiddle here - http://jsfiddle.net/8bnLkyLv/

It’s super simple,

tag that contains a font awesome tag.

The tag needs to be bigger than the text.

I need the text and the icon to be centered horizontally in the red container.

I know I could to it by absolutely positioning the tage but that seems like alot of messing for something so simple.
2

If you mean you want the icon aligned to the middle of the text then just add this:

.alert p i{
    font-size: 2em;
    padding: 0 10px 0 0;
    vertical-align:middle;/* add this*/
}

(BTW there is no ‘center’ value for vertical-align).

If you were referring to centering the text and the icon within a fixed height container then that’s best done by turning the container into having a display of table-cell and using vertical-align:middle on it (just like in a real table).