html - float div 的垂直对齐

Question

我试图让一个 float 的 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

float 元素不能垂直对齐，您应该使用行内 block ，或将文本的行高设置为图像高度。另一种方法是使用“display: table-cell”

内联 block 示例:

.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>