What is the best way to position items of varying heights in alignment?

Can someone help me with this issue? I have a grid with 12 columns, each containing 2 identical icons and 2 texts of different heights. I need to align the icons in the center and make sure the texts are at the same height, but I'm having trouble achieving this. The icons align fine, but the texts are always misaligned.

  .benefits .benefits_item {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 35px;
  min-height: 150px;
}

.benefits .benefits_item .benefits_round {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 25px;
  width: 116px;
  height: 116px;
  background: #1EACC7;
  border-radius: 50%;
}

.benefits .benefits_item .benefits_descr {
  width: 370px;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-size: 15px;
  color: #202020;
}

.benefits .benefits_item .benefits_descr span {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-size: 17px;
  line-height: 25px;
  color: #1EACC7;
<div class="row">
  <div class="col-md-6">
    <div class="benefits_item">
      <div class="benefits_round"><img src="" alt="1" class="benefits_icon"></div>
      <div class="benefits_descr"><span>Lorem ipsum dolor sit ame</span><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec arcu ligula, lacinia vel fermentum elementum</div>
    </div>
  </div>

  <div class="col-md-6">
    <div class="benefits_item">
      <div class="benefits_round"><img src="" alt="2" class="benefits_icon"></div>
      <div class="benefits_descr"><span>Lorem ipsum</span><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec arcu ligula, lacinia vel fermentum elementum, malesuada vel ante. Donec ut odio augue. Integer a aliquet quam. Aenean ut enim ullamcorper, feugiat neque ac,
        pretium augue.</div>
    </div>

  </div>
</div>

htmlcssbootstrap-5

Answer №1

To center items vertically in a 

<div class="row">
in Bootstrap, you can simply add align-items-center -- since Bootstrap's rows use display: flex, you can take advantage of other flex utility classes for additional styling options.

:root {
  --color: #1EACC7;
  --iconSize: 6rem;
}

.benefits_round {
  height: var( --iconSize );
  max-width: var( --iconSize ); min-width: var( --iconSize );
  background-color: var( --color );
}

.benefits_descr span { color: var( --color ) }
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="92f0fdfde6e1e6e0f3e2d2a7bca3bca1">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

<div class="container-md">
  <div class="row align-items-center">
    <div class="col-sm-6">
      <div class="d-flex justify-content-center align-items-center">
        <div class="benefits_round rounded-circle me-4 d-flex justify-content-center align-items-center">
          <img src="" alt="1">
        </div>
        <div class="benefits_descr fw-light">
          <span class="fs-5">Lorem ipsum dolor sit ame</span>
          <br>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec arcu ligula, lacinia vel fermentum elementum
        </div>
      </div>
    </div>

    <div class="col-sm-6">
      <div class="d-flex justify-content-center align-items-center">
        <div class="benefits_round rounded-circle me-4 d-flex justify-content-center align-items-center">
          <img src="" alt="2">
        </div>
        <div class="benefits_descr fw-light">
          <span class="fs-5">Lorem ipsum</span>
          <br>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec arcu ligula, lacinia vel fermentum elementum, malesuada vel ante. Donec ut odio augue. Integer a aliquet quam. Aenean ut enim ullamcorper, feugiat neque ac, pretium augue.
        </div>
      </div>
    </div>
  </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

What is the best way to ensure items are aligned to the top of the navbar as a picture is enlarged?

I have searched through various similar questions, but none of them have provided a solution to my specific issue. I have attempted multiple suggestions, but none have been successful. (I am working with bootstrap4) Here is the html code I am using: < ...

htmlcssbootstrap-4

Using d3.js to dynamically change the color of svg elements based on their data values

I was searching for a way to dynamically color SVG rectangles based on values from a dataset. If I were to create rectangles for each data entry, how could I adjust the rectangle's color according to the data value? Here is what I currently have: // ...

javascripthtmlcssd3.jssvg

Selector matching a descendant element in React styling

I am facing a challenge with using the direct descendant CSS selector within a React inline style element: <style>{` .something>div{ color: blue; } `}</style> While this works fine in development, in production React replaces > ...

cssreactjs

Incorporate the stylish PayPal icon from Font Awesome into the PayPal code

I'm experimenting with adding the font awesome paypal icon <i class="fa fa-paypal" ></i> before the PAY WITH PAYPAL text on my button. You can see a similar setup on this page with the shopping cart icon <i class="fa fa-shopping-cart"& ...

htmlpaypalfont-awesome

Span element not displaying as a clickable hyperlink

The magnifying glass icon inside the orange search bar at the top of this page is not appearing as a link, so when hovered over there is no pointer.. Any thoughts on why this might be? Below is the CSS: .searchGlass { background-image: url(/images/search ...

htmlcss

Leveraging the power of JavaScript Math methods to dictate the Co-ordinates of HTML Canvas .fillRect

Greetings to everyone! I have dedicated my entire evening to understanding how to implement the (Math.floor(Math.random()) function as the coordinates for the .fillRect method on an HTML canvas element. Despite searching through this website and various ...

javascriptjqueryhtmlcanvas

Adjust the header and menu color as you scroll

Starting fresh with JavaScript, I'm seeking advice on a specific piece of code. Working on a Joomla 3.2 website using the Gantry template by default. My goal is to achieve the following: When a user accesses a submenu (e.g., 01, 02, 03) derived from t ...

jqueryhtmlcss

Button with opaque background over a see-through backdrop

I am having trouble making the button within a semi-transparent caption area over an image non-transparent. Any suggestions on how to achieve this? <div class="col-md-12 landing-container"> <img src="images/pig.jpg" class="main-imag ...

htmlcss

Attempting to conceal an HTML 'label' element by employing CSS 'hide' properties

Why is it so difficult to hide a checkbox that says "Remember Me" on my membership site login form? The HTML code snippet causing the issue: <label><input name="rememberme" type="checkbox" id="rememberme" value="forever" /> Remember Me</la ...

css

Align two grid columns in the centre of the footer

I have a question regarding the alignment of two grid columns in my footer. I am using Bootstrap 4 and would like to center them directly in the middle. Currently, both columns are centered individually but there is a large space between them. I have tried ...

htmlcsstwitter-bootstrapbootstrap-4

Eliminating the appearance of horizontal scroll bar by employing transform scale to zoom out

When you run the code provided in the link below and scale down the HTML to 50% while increasing the width to fit the window, a scrollbar becomes visible. This only occurs in Chrome and not in Firefox. Click here The content of the DOM can be modified and ...

htmlcsszooming

Toggle sidebar: expand/collapse

Looking for some assistance with my website project. I currently have two arrows to open and close the sidebar, but I would like one button to handle both actions instead. Can someone help me edit my code snippet to achieve this? Keep in mind that I am new ...

javascripthtmlcss

The art of uploading images with HTML and CSS

Looking for guidance on how to convert this image bubble so that users can upload their images during account creation. When the user hovers over the image bubble, it should display "Upload profile image" and prompt them to upload an image upon clicking. A ...

htmlcssimage

What is the best way to insert my words within the boundary?

I am seeking assistance on inserting text within the border I created using an image. As I continue to add more text, I want it to display within the border as I type. Any guidance you can provide would be greatly appreciated. Thank you! li { list-sty ...

htmlcss

What is the method for embedding a concealed form within a table?

I am a beginner in HTML and RoR. I am trying to include a button inside a table that will submit a hidden form. However, I am facing an issue where the button is not showing up in the generated HTML. <table class="centerBox"> <h3>Search Resu ...

htmlruby-on-railsruby

`I'm having trouble with my PHP variables disappearing after submitting a form (resolved)`

I am new to learning about forms and PHP. Currently, I am experimenting with a simple HTML file from W3Schools that contains the following code: <html> <body> <form action="welcome.php" method="get"> Name: <input type="text" name="na ...

phphtml

Why is the CSS selector `:first-child:not(.ignore)` not working to exclude the `ignore` class from the selection?

Is there a way to utilize the first-child selector with the not(.ignore) selector to target every element that is the first child of its parent, except when that first child has the class ignore? I've experimented with :first-child:not(.ignore){...}, ...

htmlcsscss-selectors

Customizing Material UI tooltip styles with inline CSS formatting

Currently in the process of creating a React component that utilizes the Material UI Tooltip feature. In my component, I have the need to manually reposition the Mui Tooltip by targeting the root popper element (MuiTooltip-popper). However, the Mui Toolti ...

javascriptcssreactjsmaterial-ui

Utilize JQuery to implement fading effects for clicked elements in a webpage

I've been using a rollover JavaScript plugin to create smooth transitional effects when users hover over clickable page elements. Everything was going well until I decided to switch to making ajax calls instead of page loads for dynamic content. The p ...

javascriptjqueryhtmlcss

Adjust the background color of the body content to reflect changing content

How can I change the background color to #97EFFC when a menu item is selected? I want the body content background to be transparent until a menu item is displayed. Site.css /* Responsive: Portrait tablets and up */ @media screen and (min-width: 768px) { ...

css