Vertical alignment of a floated div

Question

I'm trying to center vertically a floated div, here is the JSFiddle

.wrapper{
    width:250px;
    background-color:red;
}

#SmileImg{
    height:100px;
    width:auto;
}

.textwrapper{
    float:right;
}

<div class="wrapper">
    <img src="http://img.xcitefun.net/users/2010/02/147370,xcitefun-smile-4.png" id="SmileImg" />
    <div class="textwrapper">
        <p>Please Smile!</p> 
    </div>       
</div>

I do not know how to put the text "Please Smile" vertically centered.

Hope someone will help me. Please be patient I am not an expert! Thank you in advance!

Answer 1

Floating elements cannot be vertically aligned, you should either use inline blocks, or set line height equal to image height for your text. One more way is to use "display: table-cell"

example with inline blocks:

.wrapper{
    width:250px;
    background-color:red;
}

#SmileImg{
    height:100px;
    display: inline-block;
    vertical-align: middle;
}

.textwrapper{
    display: inline-block;
}

<div class="wrapper">
    <img src="http://img.xcitefun.net/users/2010/02/147370,xcitefun-smile-4.png" id="SmileImg" />
    <div class="textwrapper">
        <p>Please Smile!</p> 
    </div>       
</div>