Vertically align text with different font sizes

Hi all

I have a jsfiddle here -

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.

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).