How to vertically center p tags text in css

Question

I am working on the fiddle in which I want to vertically centered text in css.

The HTML code which I have used in order to built the fiddle is:

<div class="poster text-center pt-4">
   <div class="item">
      <img class="item_poster_image" src="https://i.imgur.com/lbDo4tM.jpg">
   </div>
   <div class="poster_name_location">
      <p class="mb-0">posted by,<span style="color:#ff8b5a;">hello</span></p>
      <p class="poster_location">located in, <span style="color:#ff8b5a;">San Francisco, California</span></p>
   </div>
</div>

Problem Statement:

I am wondering what CSS codes I need to add in the fiddle so that text comes at the center of an image.

I tried adding the following css code but it doesn't seem to work.

.poster_name_location
{
middle
}

Answer 1

You can achieve that using flex-box & align-items: center.

.item_poster_image {
  height: 120px;
  width: 120px;
  -o-object-fit: contain;
  object-fit: contain;
  max-width: 100%;
  border-radius: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

.item {
  padding: 0;
  margin: 0px 10px 0px 10px;
}

.poster {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.poster_name_location {
  text-align: left;
  display: block;
  justify-content: center;
}

.text-center {
  align-items: center;
}

<div class="poster text-center pt-4">
  <div class="item">
    <img class="item_poster_image" src="https://i.imgur.com/lbDo4tM.jpg">
  </div>
  <div class="poster_name_location">
    <p class="mb-0">posted by, <span style="color:#ff8b5a;">hello</span></p>
    <p class="poster_location">located in, <span style="color:#ff8b5a;">San Francisco, California</span></p>
  </div>
</div>