PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Thursday, November 17, 2022

[FIXED] How to vertically center p tags text in css

 November 17, 2022     css, html, vertical-alignment     No comments   

Issue

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
}

Solution

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>



Answered By - felixmosh
Answer Checked By - Robin (PHPFixing Admin)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing