一個浮動的div

Question

我想要垂直居中一個浮動的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>

我不知道如何把文字「請微笑」垂直居中。

希望有人能幫助我。請耐心等待我不是專家！ 提前謝謝！

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>