How to vertically align text in html/css?

Question

I am working on a fiddle in which I want to vertically align James text in html/css as shown below in the image. The HTML code which I have used for that is:

<div class="tab-pane" id="reviews" style="display: block;">
   <p>
      <span class="heading_size">reviews:</span>
   </p>
   <p class="text-justify mb-0 mb-1">
   </p>
   <div class="review">
      <div class="mb-2 renter_review">
         <div class="renter_rating_image">
            <img class="item_review_image" src="https://i.imgur.com/lbDo4tM.jpg">
         </div>
         <p style="text-align:center;font-style:italic;margin-bottom:0%;">this bobcat was amazing</p>
         <span>10.22,07, 04, 18</span>
      </div>
      <div class="renter_review_firstname">James</div>
   </div>
   <div class="review">
      <div class="mb-2 renter_review">
         <div class="renter_rating_image">
            <img class="item_review_image" src="https://i.imgur.com/lbDo4tM.jpg">
         </div>
         <p style="text-align:center;font-style:italic;margin-bottom:0%;">it was perfect!</p>
         <span>10.14,01, 17, 18</span>
      </div>
      <div class="renter_review_firstname">James</div>
   </div>
   <p></p>
</div>

In the fiddle, the text James is not properly aligned. I am wondering what changes I need to do in the HTML/CSS code so that the text James is aligned vertically properly.

I have a feeling width of this bobcat was amazing and it was perfect text is making James text not properly aligned vertically.

Problem Statement:

I am wondering what changes I need to do HTML/CSS code so that James text is properly vertically aligned.

At this moment, as shown in the image below, the upper James text is quite right in comparison to the lower James text.

@Jonathan No they are not duplicate. The topic of the question remains the same but they both are different. — john, Aug 26 '18 at 22:45

score 0 · Answer 1 · answered Aug 26 '18 at 22:51

You can use this solution, or another now we have a GRID also.

This solution, is to wrapping the content of your container with review class, and use flexbox for what you want.

.wrapper-review {
  display: flex;
  flex-flow: row wrap;
}

<div class="tab-pane" id="reviews" style="display: block;">
   <p>
      <span class="heading_size">reviews:</span>
   </p>
   <p class="text-justify mb-0 mb-1">
   </p>
   <div class="wrapper-review">
    <div class="review">
      <div class="mb-2 renter_review">
         <div class="renter_rating_image">
            <img class="item_review_image" src="https://i.imgur.com/lbDo4tM.jpg">
         </div>
         <p style="text-align:center;font-style:italic;margin-bottom:0%;">this bobcat was amazing</p>
         <span>10.22,07, 04, 18</span>
      </div>
      <div class="renter_review_firstname">James</div>
   </div>
   <div class="review">
      <div class="mb-2 renter_review">
         <div class="renter_rating_image">
            <img class="item_review_image" src="https://i.imgur.com/lbDo4tM.jpg">
         </div>
         <p style="text-align:center;font-style:italic;margin-bottom:0%;">it was perfect!</p>
         <span>10.14,01, 17, 18</span>
      </div>
      <div class="renter_review_firstname">James</div>
   </div>
   </div>
   <p></p>
</div>

score 0 · Answer 2 · answered Aug 26 '18 at 23:02

0

Trying adding the following to your css

p {
   width: min-content;
}

But you should try using a grid system like http://getbootstrap.com. It helps a ton! :)

answered Aug 26 '18 at 23:02

code

1,041
1
12
28

How to vertically align text in html/css?

2 Answers2