Vertically align center inside a div

Question

I am trying to make 3 contents appear vertically center inside a div. I used vertical-align:middle but it does not do what i want to do. How can I fix this?

I want the home_post_time to appear at the right corner vertically centered.I've tried float:right; but could not do what i wanted. This is how i want it to appear

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>

@ManojLodhi No - Create a snippet here! Just like I did using the `<>` button — mplungjan, Feb 21 '17 at 12:09
Possible duplicate of [Vertically align text next to an image?](http://stackoverflow.com/questions/489340/vertically-align-text-next-to-an-image) — mplungjan, Feb 21 '17 at 12:10
Please read the extensive SO documentation on [`Vertical centering`](http://stackoverflow.com/documentation/css/5070/vertical-centering#t=201702211211393223577). Recommended method: `flexbox`. — tao, Feb 21 '17 at 12:12
refer this [**JSFiddle**](https://jsfiddle.net/vivekkupadhyay/rqub5L9d) — vivekkupadhyay, Feb 21 '17 at 12:14
Best answer regarding this topic: http://stackoverflow.com/a/19461564/3290256 — nashcheez, Feb 21 '17 at 12:17

score 1 · Answer 1 · answered Feb 21 '17 at 12:13

You can use this

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

for your code

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

score 1 · Answer 2 · answered Feb 21 '17 at 12:14

you can use flex to make it vertical center as below

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

score 0 · Answer 3 · edited May 23 '17 at 11:53

I've made the main container position: relative; The time container I've made position: absolute; with a top of 50% and a margin-top minus half of its height. 10px was just an approximate.

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

https://jsfiddle.net/1f09hp3f/

You've used mostly static widths and heights so this solution should work for you, if you only want to center align one element. Otherwise you can have a look at the below link to center align all elements vertically. Vertical alignment of elements in a div

Vertically align center inside a div

3 Answers3