浮动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> 

Answer 2

use display: table

 *{ padding: 0; margin: 0; box-sizing: border-box; } .wrapper{ width:250px; background-color:red; display: table; } .item{ display: table-cell; vertical-align: middle; } #SmileImg{ height:100px; width:auto; } 

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