Вертикально выровнять центр внутри div

Question

Я пытаюсь сделать 3 содержимого вертикально центрированным внутри div. Я использовал vertical-align:middle, но он не делает то, что я хочу сделать. Как я могу это исправить?

Я хочу, чтобы home_post_time появлялся в правом углу по вертикали по центру. Я пробовал float:right;, но не мог делать то, что хотел. Это, как я хочу, чтобы она появилась

Image 
Image text    time 
Image 

.home_post_sections { 
 
    width: 100%; 
 
    height: 33%; 
 
    background-color: #01ff70; 
 
    text-align: left; 
 
} 
 

 
.home_post_propic { 
 
    width: 55px; 
 
    height: 55px; 
 
    margin-top: 5px; 
 
    margin-left: 5px; 
 
    margin-bottom: 5px; 
 
} 
 

 
.home_post_username { 
 
    margin-left: 20px; 
 
    width: 100%; 
 
    vertical-align: middle; 
 
} 
 

 
.home_post_time { 
 
    float: right; 
 
    vertical-align: middle; 
 
    text-align: right; 
 
    margin-right: 10px; 
 
}

<div className="home_post_sections"> 
 

 
    <img src="http://lorempixel.com/output/people-q-c-55-55-9.jpg" className="home_post_propic" /> 
 
    <a className="home_post_username">User name</a> 
 
    <a className="home_post_time">23h</a> 
 

 
</div>

Answer 1

Вы можете использовать этот

<div style="display:flex;justify-content:center;align-items:center;"> 
<h1>Text In center</h1> 
</div> 

для кода

<div style="display:flex;justify-content:center;align-items:center;"> 

<img src="http://lorempixel.com/output/people-q-c-55-55-9.jpg" className="home_post_propic" /> 
<a className="home_post_username">User name</a> 
<a className="home_post_time">23h</a> 
</div> 

Answer 2

вы можете использовать прогибается MAK e это вертикальный центр ниже

<style> 
.home_post_sections{ 
    display : flex; 
    align-items : center; //make child items align vertically center 
} 
</style> 

<div className="home_post_sections"> 

    <img src="http://lorempixel.com/output/people-q-c-55-55-9.jpg" className="home_post_propic" /> 
    <a className="home_post_username">User name</a> 
    <a className="home_post_time">23h</a> 

</div> 

Answer 3

Я сделал положение основного контейнера: относительное; Ящик времени, который я сделал: абсолютный; с вершиной 50% и маржинальной вершиной минус половина ее высоты. 10px был просто приблизительным.

.home_post_sections { 
    position: relative; 
} 
.home_post_time { 
    position: absolute; 
    top: 50%; 
    right: 10px; 
    margin-top: -10px; 
} 

https://jsfiddle.net/1f09hp3f/

Вы использовали в основном статические ширины и высоты, так это решение должно работать для вас, если вы хотите, чтобы центр выравнивать один элемент. В противном случае вы можете взглянуть на приведенную ниже ссылку, чтобы выровнять по центру все элементы по вертикали. Vertical alignment of elements in a div