Getting two child elements to be perfectly centered vertically

I have encountered a similar issue to many others, but despite trying various solutions, I can't seem to identify where I am going wrong. My parent element is supposed to display 3 blocks of information across the screen, each consisting of a large icon and descriptive text below.

Initially, with the HTML and CSS provided below, everything seems to lay out correctly. However, when I reduce the width of the descriptive text to match the icon's width, it visually adjusts but maintains the original width in the layout. I tried using inline-block and adjusting the values, which worked perfectly. But now, I'm struggling to center the icon and text vertically.

I attempted applying a display: grid to the parent element and positioning them vertically, but I can't figure out how to center them properly. Any assistance and advice would be greatly appreciated.

.options-resume {
  display: flex;
  justify-content: center;
}

.resume-subtitle {
  color: #666b74;
  font-weight: bold;
  font-size: 38px;
  padding: 45px 0 45px 0;
}

.resume-column {
  display: inline-grid;
}

.resume-icons {
  display: flex;
  justify-content: space-around;
}

.resume-subtitle {
  display: inline-block;
  font-family: 'RalewayRegular';
  font-size: 14px;
  color: #666b74;
  position: relative;
  width: 58%;
  text-align: center;
}

.icon-credit-card {
  font-size: 220px;
}

.icon-support {
  font-size: 220px;
}

.icon-phone {
  font-size: 220px;
}
<div class="options-resume">
  <h1 class="resume-subtitle">How to center vertically ?</h1>
</div>
<div class="resume-icons">
  <div class="resume-column">
    <label>
      <i class="icon-credit-card"></i>
    </label>
    <p class="resume-subtitle">Lorem Ipsum is simply dummy text of the printing and typesett</p>
  </div>
  <div class="resume-column">
    <label>
      <i class="icon-phone"></i>
    </label>
    <p class="resume-subtitle">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
  </div>
  <div class="resume-column">
    <label>
      <i class="icon-support"></i>
    </label>
    <p class="resume-subtitle">Lorem Ipsum is simply dummy text of the prin</p>
  </div>
</div>

Here is a link to a CodePen demonstration of my application behavior with images:

https://codepen.io/CharlieJS/pen/VwaKRZj

Answer №1

Give this a shot

.resume-column {
  utilize: flex;
  create-flow: column;
  center-align: items;
}

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

Reinitializing AngularJS form controls

Check out this codepen example: http://codepen.io/anon/pen/EjKqbW I'm trying to reset the form elements when the user clicks on "Reset". The div elements f1,f2,f3 should be hidden and the searchText box cleared. However, the reset button is not trig ...

using regular expressions to find unclosed font tags that match on a single line

Even though regex is not typically recommended for parsing HTML, in this case we are dealing with a single line string input to a function. For example: <font color = "#ff0000"> hello </font>. I want the regex pattern to match only if the tag ...

Using jQuery to apply gradient fill to SVG elements

Is it possible to create a gradient fill in an SVG with two or three colors dynamically? Currently, filling an SVG path with just one color can be done easily. Radial gradients are an option but don't offer much flexibility as colors have to be define ...

How to create a responsive image that appears over a button when hovering in Bootstrap?

My goal is to display an image over a button when hovering. I've tried adding the .img-responsive class in Bootstrap while including the image in the HTML, but it's not working as expected with my current method of loading images. The buttons the ...

Tips for embedding Jquery code within Vuejs applications

Trying to code a Vue.js Navbar that changes color when scrolling using Jquery and CSS script. It works, but I encountered an error with Vue.js not supporting the syntax '$' after page refresh, resulting in a "$ not defined" error message. As a ne ...

do not display entries with expired duration

update1: Unfortunately, even after testing in the sandbox, the result is still returning empty :( https://codesandbox.io/s/happy-https-u8lu2 After filtering my starsValues based on height and weight, I am able to get some results. However, I also n ...

Loading and refreshing iframe content in real-time using JQuery on change() and keyup() events

I have been tackling a unique challenge with my custom CMS in Drupal for a couple of weeks now. I am facing an issue where I need to dynamically load a URL by extracting the node ID from the target Drupal page and appending it to the base URL of the websit ...

Adjust the message hues upon form submission with Ajax

Can anyone provide assistance? I am in need of a functional form for sending emails. <form enctype="multipart/form-data" role="form" id="form" method="post" action="handler.php"> <div class="form-row"> <div class="form-g ...

Extract hidden form variables using a function in PHP

Here is the JavaScript function that I have written: function GetCellValues() { var rows = document.getElementsByTagName('tr'); var str = ''; for (var c = 1 ; c < rows.length ; c++) { str += '\n&apo ...

Ways to boost CSS transform with GPU acceleration

Is there a way to ensure smooth animations by utilizing GPU acceleration for CSS transforms in browsers? When does this acceleration occur and how can it be forced? For more information, check out this article ...

Proper positioning of popover ensures it does not exceed the boundaries of its parent

In my ngprime table, the header row contains a column field with a popover set to display at the top. However, it is covering the actual field instead of appearing above it. This issue arises because the popover cannot display outside of its parent div, ca ...

What is the best way to hide only the rows in a table when it is clicked using JavaScript?

Is there a way to hide rows in these tables by clicking on the table head? I'm currently using bootstrap 5 so JQuery is not an option. <table class="table table-info table-bordered"> <thead id="tablea"> ...

Is there a way to send the values of multiple checkboxes using Ajax and display them in separate div elements?

I have a JSP page with checkboxes. I am trying to retrieve the checkbox values and include them in the data property of an AJAX call. When the AJAX call is made, a div will open displaying the selected checkbox values as follows: fruits: Lichi, Mango H ...

Discover the process of utilizing doc.getElementbyClassName to determine if any of its elements are blank

On my HTML invoice table, I sometimes have empty elements that cause the row to misalign. To fix this, I want to add whitespace if an element is empty. Here is the structure of the table: <div class="invoiceTable"> <div class="titles2" style=" ...

Utilizing Local Files in a Bootstrap Video Carousel

Currently working on a website for a school project and I am trying to incorporate a carousel of videos. After finding a bootstrap carousel template that played videos linked to a server, I attempted to switch it out with local video files without succes ...

Automatic switching between Bootstrap 5 tab panes at precise time intervals

Is there a way to have the Bootstrap 5 tab-pane automatically switch between tabs at set intervals, similar to a Carousel? I found a code snippet on this link, but it appears to be outdated and only works for Bootstrap 3. Could someone assist me in updati ...

How to position a popup window perfectly in the center without having direct access to the popup code

Currently, I am faced with the challenge of using software that does not allow direct editing of HTML on individual pages. Instead, I have the ability to add code to the header and footer to make modifications to the content within the body of each page. ...

Techniques for transferring images directly into HTML canvas games

I created a thrilling race car game and here is the code snippet: index.html <!DOCTYPE html> <html> <head> <title> Extreme Race Car Game </title> <link rel="stylesheet" type="text/css" href="style.css"> < ...

I'm having trouble getting my paragraph to center with both Bootstrap 4's margin:auto and text

I've been trying to center a paragraph in my project but it's not working out. I attempted using margin:0px auto; and the text-center features, but they didn't have the desired effect. <div class="row text-center"> <p> You c ...

What strategies can I use to ensure consistent website layout across various zoom levels and browsers?

As a newcomer to web design, I am excited that my site is almost ready to go live. However, I have encountered some significant issues right before launch. When the site is zoomed in or out, the content becomes misaligned at certain zoom percentages. Add ...