垂直对齐具有不同字体大小的文本

Question

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

    <div class="alert">
        <p><i class="fa fa-exclamation-triangle"></i>This is some text</p>
    </div>

It's super simple, <p> tag that contains a <i> tag that containers a font awesome icon.

The <i> 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 <i> tag but that seems like a lot of messing for something so simple.

Answer 1

Simply give the bigger inline-level element - the <i> element in this case - a vertical-align of middle .

 .alert { background: red; font-family: sans-serif; text-align: center; } .alert p { color: white; display: inline-block; padding: 5px 0; vertical-align: center; } .alert pi { font-size: 2em; padding: 0 10px 0 0; vertical-align: middle; /* <-- Added declaration */ } 

 <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"/> <div class="alert"> <p> <i class="fa fa-exclamation-triangle"></i> This is some text </p> </div>