Вертикальное выравнивание перемещаемого 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>