Align three or more Font Awesome icons in a row at the center

When it comes to center aligning an icon, I typically use margin: auto;, text-align: center;, or 

left: 50%; transform: translateX(-50%);
. However, I've run into a hurdle trying to center align three icons together. I thought applying these techniques to a wrapping div would do the trick, but it hasn't worked as expected. I want all three icons to be in the same row like this:

https://i.sstatic.net/HZtLR.png

<div class="socialWrap">
   <a href="/content/campaigns/we-retail" target="_blank"><i class="fa fa-facebook-square"></i></a>
   <a href="/content/campaigns/we-retail" target="_blank"><i class="fa fa-twitter-square"></i></a>
   <a href="/content/campaigns/we-retail" target="_blank"><i class="fa fa-youtube"></i></a>
</div>
htmlcssless

Answer №1

Is this the information you seek?

.socialWrap {
  display: flex;
  justify-content: center;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="socialWrap">
  <a href="/content/campaigns/we-retail" target="_blank"><i class="fa fa-facebook-square"></i></a>
  <a href="/content/campaigns/we-retail" target="_blank"><i class="fa fa-twitter-square"></i></a>
  <a href="/content/campaigns/we-retail" target="_blank"><i class="fa fa-youtube"></i></a>
</div>

Answer №2

implemented the use of flexbox to accomplish this.

.socialWrap {
  display: flex;
  justify-content: center;
}

.socialWrap a {
  margin-right: 5px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="socialWrap">

  <a href="/content/campaigns/we-retail" target="_blank"><i class="fa fa-facebook-square"></i></a>
  <a href="/content/campaigns/we-retail" target="_blank"><i class="fa fa-twitter-square"></i></a>
  <a href="/content/campaigns/we-retail" target="_blank"><i class="fa fa-youtube"></i></a>
</div>

Answer №3

To implement a grid layout, you can use the CSS property display: grid. Take a look at the following code snippet for reference.

.socialWrap {
  display: grid;
  justify-content: center;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="socialWrap">
  <a href="/content/campaigns/we-retail" target="_blank"><i class="fa fa-facebook-square"></i></a>
  <a href="/content/campaigns/we-retail" target="_blank"><i class="fa fa-twitter-square"></i></a>
  <a href="/content/campaigns/we-retail" target="_blank"><i class="fa fa-youtube"></i></a>
</div>

Answer №4

If you're utilizing Bootstrap-4, just adding one class will do the trick. Give this a shot:

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="socialWrap text-center">
   <a href="/content/campaigns/we-retail" target="_blank"><i class="fa fa-facebook-square"></i></a>
   <a href="/content/campaigns/we-retail" target="_blank"><i class="fa fa-twitter-square"></i></a>
   <a href="/content/campaigns/we-retail" target="_blank"><i class="fa fa-youtube"></i></a>
</div>

Answer №5

Give this a shot.

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="socialWrap">

  <link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="socialWrap" align="center">
   <a href="/content/campaigns/we-retail" target="_blank"><i class="fa fa-facebook-square"></i></a>
   <a href="/content/campaigns/we-retail" target="_blank"><i class="fa fa-twitter-square"></i></a>
   <a href="/content/campaigns/we-retail" target="_blank"><i class="fa fa-youtube"></i></a>
</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

Discovering the exact measurement of "remaining space" in absolute units with flexbox techniques

I am faced with a dilemma that is leaving me uncertain. Within a flexbox layout, specifically column-oriented, there are three children: top, middle, and bottom. The challenge arises in the middle child where I must embed a third-party component that requ ...

htmlcssflexbox

How can we stop the jumping of images in the grid? Is there a way to eliminate the jump effect?

Here is a script I am working with: <script src="http://static.tumblr.com/mviqmwg/XyYn59y3a/jquery.photoset-grid.min.js"></script> <script> $(document).ready(function() { $('.photoset-grid').photose ...

javascriptjquerycsshtml

React JS tutorial: deleting an entry from the browser's localStorage

I am currently working on an App that fetches data from an API and updates it randomly every 3 seconds. The user has the ability to print the data by clicking a button, which can also be used to stop the random updates. I have managed to implement this fun ...

javascripthtmljquerycssreactjs

Creating a custom button in PHP

Currently, I am in the process of developing a shopping cart feature. One key requirement is to send both the product ID and the desired quantity chosen by the user to another file named cart.php. Below is an excerpt from my code snippet: for($i=0;$i< ...

phphtmlmysqlformsform-submit

When the browser window is resized to mobile view, a div is overlapped by an image

I've encountered an issue with the image size and position when resizing to mobile view in the browser. .extension { display: table; padding: 50px 0px 50px; width: 100%; height: auto; color: #fff; background-color: #558C89; ...

javascriptjqueryhtmlcss

Collection of HTML elements that need to stay in the same section

I am struggling to align multiple vertical lines of data on a webpage and keep them together when the page size changes. I've been working with CSS and HTML code but finding it challenging. Any suggestions or alternative approaches would be greatly ap ...

htmlcsssubscriptsuperscript

AJAX (Vanilla JavaScript): Sending Image through HTTP Request

I am a beginner with ajax and prefer not to use frameworks. I attempted to use PHP to determine if a file is set and display either true or false, but it didn't work as expected. I'm unsure of where I went wrong. Below is my HTML and JS code: & ...

javascriptphpajaxhtml

Utilizing Selenium for web scraping on Google Maps consumes an excessive amount of data

Scraping travel times from Google Maps is a task I have successfully accomplished. The code below scrapes travel times between 1 million random points in Tehran utilizing multiprocessing for efficiency. You can run the code provided in a terminal environme ...

pythonhtmlseleniumwebdriver

What is the best way to separate two <a> tags using only Bootstrap?

Currently, I am utilizing a PHP for loop to display 10 tags on an HTML page. My challenge lies in wanting the <a> tags to be displayed on separate lines with some spacing. It's common practice to handle this through custom CSS, however, is ther ...

htmlcsstwitter-bootstrap-3bootstrap-4

Automatically adjusting input box size and position in real-time

I am working on a form that includes a button and an input field. When the user clicks on the button "ADD MORE FIELDS," I want to dynamically generate a new input box. Although I have tried using code from this jsfiddle link and it works, my goal is to ach ...

javascriptjqueryhtmlcss

Ensuring Consistent TD Heights in Email Designs

I am currently facing a challenge in building an HTML email, specifically in ensuring that two TD elements have the same height across all email clients. Since it is a responsive email design, I have opted to separate the columns into two tables instead o ...

htmlemailhtml-tableemail-client

Angular's Validator directive offers powerful validation capabilities for reactive forms

Referenced from: This is the approach I have experimented with: custom-validator.directive.ts import { Directive } from '@angular/core'; import { AbstractControl, FormControl, ValidationErrors } from '@angular/forms'; @Directive({ ...

htmlangulartypescript

Maintaining an element's vertical position in relation to the screen with jQuery

I'm very close to achieving what I want, but my goal is a bit unconventional. My setup includes several panels divided into 2 columns, with each panel capable of triggering an expand/compress toggle. My challenge is maintaining the vertical position ...

jquerycss

Extract the text from an html element by utilizing xpath

This snippet contains HTML content <p class="ref Hover"> <b class="Hover Hover Hover Hover Hover">Manufacturer Part Number:</b> MC34063ADR2G<br> <b>Mounting Method:</b>&nbsp; Surface Mount& ...

htmlxmlxpathselenium-webdriverxml-parsing

Organizing CSS DIV code by sections for desktops and mobile devices

My CSS file contains properties that are common for both PC and cellphone browsing, but some vary between the two platforms. I utilize @media screen and (max-width: X px) to handle this, with one set of rules for narrow screens and another for wider screen ...

css

Converting HTML content into a single string simplifies data manipulation and extraction

exampleHTML=" This is sample HTML code that needs to be converted into a string using JavaScript </p>" I am looking to transform it into a single string format like str="This is sample HTML code, that needs to be converted into a string ...

javascripthtmlreactjsstring

The media query for mobile is not functioning properly

Hello, I have a page with MVC that includes CSS for iPad and mobile devices. The media query for iPad (@media only screen and (min-device-width: 768px) and (max-device-width: 1024px)) works perfectly, but I am struggling to get the media query for mobile ...

cssmobilemedia-queries

The navigation dropdown menu in Bootstrap 4 spills over the edges of the window

In the code snippet provided above, an example of a navbar with a dropdown menu is given. One issue that arises is when the dropdown menu is clicked and it overflows to the right, causing a horizontal scroll bar to appear on the window. The question at ha ...

htmlcsstwitter-bootstrapbootstrap-4

CSS for positioning tabs by sliding

Can someone assist me with properly positioning my Sliding TAB? It appears fine in my browser, but on other computers with varying resolutions, it overlaps with another tab. If you'd like to view the site, click this LINK Below is the code I am usin ...

javascriptjquerycsscross-browser

PHP Ajax Image Uploading and Storage

Is there a way to effortlessly upload an image and save it in the uploads folder without any page refresh? Not only that, but can we also have the uploaded image displayed on the screen within a designated div section? Unfortunately, I seem to encounter a ...

javascriptphphtmlajaxupload