Question

我试图垂直居中一个浮动的div here is the JSFiddle

＆＃13;

.wrapper{
    width:250px;
    background-color:red;
}

#SmileImg{
    height:100px;
    width:auto;
}

.textwrapper{
    float:right;
}

＆＃13;

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

＆＃13;

我不知道如何把文字和＃34;请微笑＆＃34;垂直居中。

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

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

＆＃13;

*{
    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;
}

＆＃13;

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

＆＃13;

浮动div的垂直对齐

2 个答案: