Is there a way to align my icons at the center of the page with the text positioned below the icons?

Is there a way to perfectly align my icons in the center of the screen with the text positioned below them? I've already spent several hours attempting this using Flexbox, but haven't found a solution that works flawlessly yet. It would be ideal if the alignment could be achieved within the DIV element.

<pre>

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="stylesheet" href="style.css">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>


   <style>
.row{
   display: flex; /* Important */ 
   justify-content: space-between; 


               .servics{
            height: 100%;
            width: 100%;
            padding-top: 2%;
            text-align: center;
            margin:  10% auto;
         
         }

         .icons{
            display: flex;

         }
         .child{
            width: 150px;
            height: 150px;
            background-color: transparent;
            border: 4px solid #87CEEB;
            border-radius: 100%;
            font-size: 50px;
            text-align: center;

            
            }

         .icon1, .icon2, .icon3, .icon4{
            color: rosybrown;
            line-height: 150px;
         }

   </style>

</head>
<body>

   <section class="servics">
      <h1>Our Services</h1>

      <div class="row">
         <div class="icons">


                  
            <div class="child icon1"> <i class="fas fa-heart"></i> Same </div>
            <div class="child icon2"> <i class="fas fa-heart"></i> Sam </div>
            <div class="child icon3"> <i class="fas fa-heart"></i> Equar </div>
            <div class="child icon4"> <i class="fas fa-heart"></i> Isma</div>
          </div>
          
      </div>
   </section>
</body>
</html>
</pre>
htmlcsscenter

Answer №1

To center any content on a webpage, you can use the following CSS:

position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);

Another way to position text below an icon is by applying border styles to the i tag.

Here's an example:

.your-icon{
    border: & & &;
    border-radius: &;
}

In this example, I added border styles directly to the icon itself, not the parent div.

You can also specify width and height for further customization, and adjust spacing using padding or margin.

Enjoy creating your designs! 👋😀

Answer №2

Here is a code snippet that could be useful:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <link rel="stylesheet" href="style.css">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@200&display=swap" rel="stylesheet">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

   <style>
         .servics{
            height: 100%;
            width: 100%;
            padding-top: 2%;
            text-align: center;
            margin:  10% auto;
            /*       https://www.youtube.com/watch?v=wfaDzSL6ll0        */
         
         }
          .icons{
             display: flex;
             justify-content: center;
 
          }
          .child{
             width: 150px;
             height: 150px;
             background-color: transparent;
             border: 4px solid #87CEEB;
             border-radius: 100%;
             font-size: 50px;
             text-align: center;
           }
 
          .icon1, .icon2, .icon3, .icon4{
             color: rosybrown;
             line-height: 150px;
          }

   </style>

</head>
<body>

   <section class="servics">
      <h1>Our Services</h1>
      <div class="icons">
         <div class="child icon1"> <i class="fas fa-heart"></i> Same </div>
            <div class="child icon2"> <i class="fas fa-heart"></i> Sam </div>
            <div class="child icon3"> <i class="fas fa-heart"></i> Equar </div>
            <div class="child icon4"> <i class="fas fa-heart"></i> Isma</div>
         </div>
      </div>
   </section>
</body>
</html>

Answer №3

Experience the ease of using the flex layout method to center your page effortlessly. Gone are the days of struggling to align your content in the middle. Simply update your style code with the following:

/* CSS */
body{
    display: flex;
    justify-content: center;
    background: orange;
    align-items: center;
    height: 100vh;
}
    
.icons *{
    display: inline-block;
}
    
.services{
    text-align: center;
}

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

Pressing the up arrow in Javascript to retrieve the most recent inputs

Is there a way to retrieve the most recent inputs I entered in a specific order? For example: I have an array with 20 elements, and every time I enter something, I remove the first element from the array and add the new input at the end. So, when I press ...

javascripthtmljquerymemoryinput

The inline-block property does not seem to be functioning as expected within Bootstrap

Take a look at my custom Navbar component: const Navbar = () => { return ( <div className='Navbar'> <ul className='list-group w-75 mx-auto'> <li className='list-group-item'> & ...

htmlcssreactjsbootstrap-4

Can you explain the contrast between the functions 'remove' and 'removeChild' in JavaScript?

I have recently coded an HTML page in order to gain a better understanding of how element removal functions. Code: <html> <head> <script> var childDiv = null; var parent1 = null; var parent2 = null; function ...

javascripthtml

The most recent update of Blink does not support the complex selector :nth-child(2):nth-last-child(2){}

There is an unusual issue: after a recent update, the selector .groups .group:nth-child(2):nth-last-child(2){} suddenly stopped working. However, it still works perfectly in Webkit and Gecko browsers. Any thoughts on how to resolve this? Snippet of HTML ...

csswebkitcss-selectorsblink

Node.js is causing issues with the functionality of Bootstrap carousel controls

I'm currently working on a sailing website, and I've run into an issue with the left and right controls and indicators in the testimonials section. They don't seem to be responding properly. Could this be due to me not including or calling t ...

htmlnode.jsbootstrap-4carouselejs

When the page is minimized, the alignment of Bootstrap divs becomes distorted

Check out my code on CodePen: http://codepen.io/auble220/pen/rOPBKP. I added media queries in this version: http://codepen.io/auble220/pen/avyZZE. Although it's not too bad, I'm sure there's a more efficient way to achieve this. I attempted ...

htmlcsstwitter-bootstrap

Adding plain HTML using jQuery can be done using the `.after()` and `.before()` methods

I have encountered a situation where I need to insert closing tags before an HTML element and then reopen it with the proper tags. The code snippet I am using is as follows: tag.before("</div></div>"); and then re-open it by adding proper tag ...

javascriptjqueryhtml

How can I use CSS to target a class defined in an XML file?

Looking at this Xml snippet, I'm interested in finding out how one can target the class "down" using css to apply consistent styling to similar code sections. The necessary css references have been correctly included at the beginning of my xml file. ...

cssxml

Tips on extracting values from HTML utilizing a CSS selector in instances where only class and style attributes are present. The class in question is generic and may be utilized elsewhere as well

''' 29/11/2021 ''' I have a code snippet that retrieves dates from a table on a webpage, but it also fetches other values along with the date. I am looking for a way to extract just the d ...

javahtmlseleniumweb-scraping

Angular 13: A guide on pulling data from an Excel spreadsheet

I have been encountering issues while trying to display data from a CSV file on a web platform using Angular 13. The errors I am facing are related to binding 'ngModel' and type mismatches in the code. errors Error: src/app/app.component.html:24 ...

javascripthtmlangulartypescript

Accessing CSV data stored externally using JavaScript

Hi there, I am struggling to load external CSV data into a script due to what I believe is the browser's same origin policy restriction. I came across some information about using cross-document messaging as a workaround, but I have no idea how to go ...

javascripthtmld3.js

Display a preview image at the conclusion of a YouTube video

I am currently working on an iOS device and have a Youtube video thumbnail that, when clicked, disappears and the video automatically plays in fullscreen mode using an iframe. It's working perfectly. Now, I would like to know how I can make the thumb ...

javascripthtmlyoutube-api

Flexbox parent div experiencing overflow due to horizontal margins protruding beyond the boundaries

Experiencing unexpected margin behavior with flex and seeking help for clarification. Here is a simple HTML structure I am using: <div className="dashboard"> <div className="dashboard__inner-container">Inner Container</div> </di ...

htmlcsssassflexbox

Integrate a button following the first paragraph exclusively when there are two or more paragraphs present

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> jQuery(document).ready(function($) { if ( $('p').length < 1 ) { $('p:last-child').after('<div id="toggle" class="btn"> ...

javascriptjqueryhtml

How can I access the value of a textbox within a dynamically generated div?

In my project, I am dynamically creating a div with HTML elements and now I need to retrieve the value from a textbox. Below is the structure of the dynamic content that I have created: <div id="TextBoxContainer"> <div id="newtextbox1"> // t ...

javascriptjqueryhtml

Creating a dynamic progress bar that scrolls for multiple elements

I am currently working on implementing a scrolling progress bar to show users how much of an article within a div they have read. For reference, something similar can be seen on this site. I have created my custom progress bar and coded it on fiddle, whe ...

javascriptjqueryhtmlscrollprogress-bar

The Datatable feature is malfunctioning, unable to function properly with Javascript and JQuery

As a novice in the world of jquery/javascript, I find myself struggling with what may seem like an obvious issue. Despite following tutorials closely (the code for the problematic section can be found at jsfiddle.net/wqbd6qeL), I am unable to get it to wor ...

javascriptjqueryhtmlcss

How can we efficiently load a JSON file from a local path into an HTML document in a way that is compatible with all browsers?

I am attempting to retrieve JSON data from a local path and display it on a basic HTML page. I have tried various methods such as fetch, ajax in order to load the data and update the corresponding values on the web page. The goal is to host this page so t ...

javascriptjqueryhtmljsonajax

Applying personalized CSS to an element based on the condition of a child element in the previous sibling element

I am trying to apply styles to a span element only when a child element in a preceding sibling div element is active, which means a radio button has been checked. I am unable to modify the code and can only use CSS for this task. Any ideas on how to achi ...

css

What is the process for combining AngularJS filters?

I currently have a fragment object like this: [{id: 721, titulo: "Cotizador Gastos Médicos Bx+ 2019", descripcion: "Cotizador Gastos Médicos Bx+ Tarifas 2019", updateDate: "2020-03-25 14:30:22.0", idCategoria: "1", …}, {id: 88, titulo: "Cotizador GMM ...

javascripthtmlangularjs