Tips for perfectly centering text within p tags using CSS

Currently, I am troubleshooting the JSFiddle where my goal is to vertically center text using CSS.

Below is the HTML code that I utilized to create the JSFiddle:

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


The Challenge at Hand:

I am seeking guidance on which CSS properties I should incorporate into the JSFiddle to ensure that the text appears centered above an image.

Despite my attempts to add the following CSS code, no progress has been made:

.poster_name_location
{
middle
}

Answer №1

To create this layout, utilize the flex-box property and apply 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript Switch Open/Close Mobile Navigation Menu

I'm currently facing a challenge with a specific issue. I want to implement a toggle menu for mobile devices on a website that I'm developing. It's functioning smoothly, and you can see it in action on this CodePen. The JavaScript code for ...

How can I make Bootstrap fit my Custom Grid?

I have received specific measurements from a customer for a customized grid layout, and I am unsure of how to implement it. Here are the measurements provided: **Width: 320px** Sides: (26px) (2 sides) Column: (52px) (4 columns) Gutter: (20px) (3 gutter ...

Show items in the sequence of clicking

Is there a way to display elements in the order they're clicked, rather than their order in the HTML using jQuery? For example: CSS code: .sq{ display:none; } HTML Code: <a href="#" id="1">A</a> <a href="#" id="2">B</a> ...

Complete the missing elements of a CSS grid layout

I'm currently working on creating a grid layout that aligns with this wireframe design: https://i.sstatic.net/AdsMX.png Here is the markup I have implemented so far: <div class="grid"> <div class="spanWidth"> <img src="https:// ...

Having issues with your JQuery code?

I am attempting to locate a cell within a table that contains the class 'empty'. My goal is to then utilize a code snippet to obtain the id (cell number) and determine which cells are adjacent to it. As part of my test, I am experimenting with t ...

Issue with CRUD functionality: The edit function is not functioning properly, as it does not reflect any changes on the

After attempting to implement an edit method in PHP for CRUD, I encountered an issue. When I click the edit button to execute the query, it redirects me to the show all page without making any changes. {<!doctype html> <?php include 'db. ...

Flexbox does not support sub-columns

I'm having trouble integrating these two columns along with their sub-columns. I have to resort to using this structure instead: <div class="custom_classes"> <div class="custom_classes">col1</div> <div class=&q ...

The shadow is obscured by a block that has an 'overflow: scroll' property

One block on the left displays the list, while another shows detailed information with a shadow effect. The issue arises when the left block has 'overflow: scroll', causing elements' backgrounds to spill over the shadow. .div-left { flo ...

Using a nested loop in Javascript to fetch JSON data

My goal is to display Categories and their corresponding subcategories in a specific order. However, my current method of using loops within loops is not producing the desired outcome: Category(Mobile) Category(Laptop) Subcategory(Iphone4) Subcategory(Iph ...

What is the best method for accessing the properties of a JavaScript object based on input from a textbox?

Just starting out with angular and having trouble generating or updating a table based on text boxes. The schema includes country, sales, and profit fields. There are two text boxes for the x-axis and y-axis inputs. The table should dynamically update when ...

Space between elements in a horizontal arrangement

While working with Bootstrap 5 and using paddings in columns, I encountered issues when some of my columns had backgrounds or when adding an embed element. How can I create margins in such cases? https://i.sstatic.net/EhF7y.png To address this issue, I i ...

The hamburger icon is not visible on smaller screens when using the Bootstrap 5 navbar

'The stylesheets for Bootstrap CSS and JS have been included in the file. The content shows up fine with default colors, but not when I customize them.' ''' <li class="nav-item"> <a class= ...

I am facing an issue with my login button as it does not seem to be performing the necessary function. Instead of advancing to the next

this is my implementation code from flask import Flask,request, render_template, redirect,session, url_for from flask_mysqldb import MySQL import MySQLdb.cursors app = Flask(__name__) app.config["MYSQL_HOST"] = "localhost" app.confi ...

What is the best way to add a centered progress spinner on top of an overlay?

Here is a code snippet that includes functionality to append a site overlay as needed. I am currently trying to implement the feature of also displaying an image progress spinner in the center of the screen over the overlay. I would prefer if this spinner ...

Incorporating CSS styling to specific elements

I am facing an issue with a CSS rule that looks like this: div#tabstrip.tabstrip-vertical.k-widget.k-header.k-tabstrip div#tabstrip-4.k-content.k-state-active{ background-image: url("http://wwww.example.com/logo2.png") !important; background-posit ...

The navigation bar vanishes from sight while scrolling underneath other sections

UPDATE: Problem solved! I discovered that the 'overflow:hidden' inside the #main for the media query was causing the navigation to disappear. I have a scroll navigation positioned at the top of my webpage. However, as I scroll down, the navigati ...

Ways to transfer data to a different PHP file without the need to navigate to the actual page

How can I make a button send information to another PHP folder while staying on the same page? <button class="btn btn-outline-dark w-60"><?php echo "<td> <a href='carrinho.php?acao=adc&id=$PegaID'>Adicionar ...

Switching the sorting criteria from 'AND' to 'OR' in the JPList library

I am currently exploring the use of JPList to sort on multiple items. As it stands, JPList searches like 'AND' when sorting (e.g. sorting based on an item with tags html, php and jQuery all together), but I am interested in filtering through all ...

Result array, employed as an input for auto-suggest functionality

I’m currently working with an array where I am iterating over an object from an API endpoint that is in stdClass format: foreach($searchResults->hits as $arr){ foreach ($arr as $obj) { $fullType = $obj->_source->categories; print_r($fu ...

Striking a line through the hyperlink tag

I am attempting to create a crossed-out line above the content of an a tag for decorative purposes. The line should stretch across the entire width without intersecting with the actual text within the tag. This is my desired outcome: https://i.sstatic.ne ...