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

我不知道如何将文本 "Please Smile" 垂直居中。

希望有人能帮助我。请耐心等待我不是专家！提前致谢！

Answer 1

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

内联块示例：

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

浮动 div 的垂直对齐

Vertical alignment of a floated div

html

css

vertical-alignment