Tips for centering fontawesome icons in your design

https://i.sstatic.net/Atian.pngI'm facing an issue with aligning 3 icons. My goal is to align them, but every time I attempt something, the first icon ends up in the middle of the page instead of the second icon where I want it to be.

.item-icon {
  width: 10%;
  position: relative;
  display: inline-block;
  text-align: center;
  left: 50%;
  top: 50%;
}

.item-image {
  font-size: 70px;
}
<div class="plan">
  <div class="item-icon">
    <div class="item-image">
      <i class="far fa-lightbulb"></i>
    </div>
    <div class="item-text">
      <p></p>
    </div>
  </div>
  <div class="item-icon">
    <div class="item-image">
      <i class="fas fa-code"></i>
    </div>
    <div class="item-text">
      <p></p>
    </div>
  </div>
  <div class="item-icon">
    <div class="item-image">
      <i class="fas fa-upload"></i>
    </div>
    <div class="item-text">
      <p></p>
    </div>
  </div>

htmlcss

Answer №1

include these guidelines it might prove a little challenging, though.

for div.plan

.plan {
    font-size: 0;
}

for div.item-icon

.item-icon {
        width: 33.33333%;
        font-size: 1rem;
        text-align: center;
}

Answer №2

Consider using margin: auto in place of setting width. This will dynamically adjust the margins on each side to center the element. 

.item-icon {
    position: absolute;
    left: 50%;
    }

.item-image {
    position: relative;
    left: -50%;
    display: inline-block;
}
.plan {
    position: relative;
}

Answer №3

.strategy {
  text-align: center;
}

.element-icon {
  display: inline-block;
  position: relative;
  width: 30%;
}

Answer №4

.design {
    text-align: center;
    padding: 24px 0; // add some vertical padding if needed
    margin: 0 -24px; // adjust horizontal padding as necessary
}

.design-icon {
    position: relative;
    display: inline-block;
    padding: 0 24px; // adjust horizontal padding as needed
}

https://codepen.io/themeler/pen/QQoGMa

You attempted to center an icon inside an icon container (.design-icon), but since the container is the size of the icon, the centering won't work as expected. Additionally, positioning each icon 50% from the left and top won't achieve the desired effect.

.design should be your icon container with centered text, and the icons should be displayed as 'inline-block' elements so that they can be centered.

I've included additional padding in both .design (vertical padding) and the icon containers themselves (horizontal padding) to keep them properly spaced.

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

Steps for retrieving the currently selected text inside a scrolled DIV

An imperfect DIV with text that requires a scroll bar For example: <div id="text" style='overflow:scroll;width:200px;height:200px'> <div style='font-size:64px;'>BIG TEXT</div> Lorem Ipsum is simply dummy text of th ...

javascriptjqueryhtmlcssdom

Ways to adjust the visibility of a div element multiple times using javascript and css

I implemented a popup feature in my application: <div id="modal"></div> let modal = document.getElementById('modal') modal.innerHTML = ` <button class="close-button" onclick="close_modal()" ...

javascripthtmlcssdjango

Does the margin fall within the element's boundaries?

Consider this code: <html> <head> <title>Understanding CSS Box Model</title> </head> <body> <section> <h1>An example of h1 inside a section</h1> </section> </body> </html& ...

htmlcss

Creating a responsive layout with two nested div elements inside a parent div, all styled

I'm currently facing an issue with using padding in my CSS to make the two divs inside a parent div responsive at 50% each. However, when combined, they exceed 100%. I suspect this is due to the padding, but I'm unsure how to resolve it. .column ...

htmlcss

Transforming the table into a list by categorizing every 3 rows together

SharePoint tends to use nested tables excessively, causing issues when trying to implement a jQuery carousel on them. To resolve this, I discovered a piece of jQuery code that can convert a table into a list: var list = $("<ul/>"); $('#tab1&apo ...

jqueryhtml

Utilizing CSS grid layouts to ensure images expand to fit the dimensions of the designated column and

I am currently working with a CSS grid layout that is displaying as follows: .image__gallery-grid { max-height: none; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 2.5rem; dis ...

htmlcss

Ensure that the submit button triggers the display of results with each click

My project involves two navigation bars, each with its own table displayed upon page load. Additionally, there is a search bar used to display search results in another table. The issue I'm encountering is that when I click the submit button once, th ...

javascriptjqueryhtml

Is it possible to store Json data in a value attribute to showcase it in a form?

JSON data is coming to me and I need to input it into a text box for editing purposes. Here's an example: <div class="form-group"> <label class="control-label col-sm-2" for="email">Email:</label> <div class="col-sm-10"&g ...

htmljson

Ways to verify the efficiency of view engines such as Pug, EJS, and HTML

Currently, I am in the process of creating a Node.js Web Server. Initially, I decided to use pug as my view engine for this project. However, the Web Designer provided me with HTML files that have a very different syntax from pug. As a result, I am cons ...

htmlnode.jsperformancepugejs

Is there a way to determine which radio button has been chosen using jQuery?

I'm trying to retrieve the value of the selected radio button using jQuery. Can anyone help with this? Currently, I am able to target all radio buttons like so: $("form :radio") But how can I determine which one is actually selected? ...

javascriptjqueryhtmljquery-selectorsradio-button

Updating the text of a Mat-Label dynamically without the need to reload the page

In my application, there is a mat-label that shows the Customer End Date. The end date is fetched initially through a GET request to an API. Let's say the end date is 16-05-2099, which is displayed as it is. There is also a delete button implemented f ...

javascripthtmlangulartypescriptrest-client

Enhanced auto-zoom feature with orientation change for iOS 7

My web page was functioning perfectly until the release of iOS 7 by Apple today, causing the layout to break when the screen orientation is changed. When focusing on a text area and rotating the screen to landscape view, the entire page zooms in. However, ...

htmliphonecssmobileios7

Upon clicking on a different div, a div will elegantly slide down from above the footer

I'm struggling with sliding a div from the bottom of the page. Here is my JSFIDDLE Currently, when I click on the blue box (arrow-hover), the div slides up (box-main). However, to hide the div (box-main) again, I have to click inside the box-main d ...

javascriptjqueryhtmlcss

Python: Remove tag and substitute u00a0 within a JSON document

I have a JSON file structured like this: [ { "content": ["<p style=\"text-align:justify;\"> This is content1</p>"], "title" : ["This is\u00a0title 1"] }, { "content": ["<p style=\"text-a ...

pythonhtmljsonunicode

Access the content of each cell in a table using JavaScript

I need help with a scenario involving a table that has 4 rows, where the 4th row contains a textbox. When the "onchange" event of the textbox is activated, I want to retrieve the data from the cells in that specific row and transfer it to another table. It ...

javascripthtml

Retrieving information from a dynamically created HTML link地址

I was curious about whether Selenium is the sole library capable of extracting data from a table on a specific webpage, found here. While attempting to navigate these sites with bs4, I found that it only displayed the table headers without any data. It wo ...

pythonhtmlselenium-webdriverbeautifulsoupdynamically-generated

Is it true that setting the background size to cover does not actually stretch the image?

Hi, I seem to be having trouble stretching an image using the background-size property. Despite setting it to cover, one or two sides of the image are always getting cropped. What I really want is a way to distort the image so that it stretches to fit any ...

htmlcssbackground-imagepositioning

Border at the Top and Text Alignment Problem

I am working on a basic navigation bar that includes a hover effect. .navip { float: left; text-decoration: none; font-weight: lighter; } .navip > a { display: block; color: black; text-decoration: none; font-size: 20px; ...

htmlcssnavigation

The PHP language includes a print language construct for outputting text

Having some trouble with a PHP script in my assignment related to page handling. When I submit it through another PHP page, it is showing the actual PHP code instead of executing properly, but it works fine when run standalone. I've created an HTML l ...

phphtmloutputechosubmit-button

What is the best way to align text in the center based on a specific portion of the content?

I'm working on an inline flex div where I want to create a unique effect using the words wrap and the div overflow. As the window is resized, some of the words in the sentence will disappear, altering the meaning. The width will determine the result: ...

htmlcss