浮動div的垂直對齊

Question

我試圖垂直居中浮動div， 這是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> 

我不知道如何將“請微笑”文本垂直居中。

希望有人能幫助我。 請耐心，我不是專家！ 先感謝您！

Answer 1

浮動元素不能垂直對齊，您應該使用嵌入式塊，或者將行高設置為等於文本圖像高度。 另一種方法是使用“顯示：表格單元”

內聯塊的示例：

 .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

使用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>