Center align three or more font awesome icons in the same row

Question

I would usually use margin: auto;, text-align: center;, or left: 50%; transform: translateX(-50%); to center align an icon. But I cannot figure out how to center align three icons. I figured using these strategies on a wrapping div would work but it hasn't. I need them all in the same row like this:

<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>

score 3 · Answer 1 · answered Sep 17 '19 at 05:16

Is this what you are looking for?

.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>

score 2 · Accepted Answer · answered Sep 17 '19 at 05:16

used flexbox to achieve it.

.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>

score 0 · Answer 3 · edited Sep 17 '19 at 05:28

You can use Display:grid as well check snippet.

.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>

Meghna Bhuptani · Answer 4 · 2019-09-17T05:28:40.800

If You are Using Bootstrap-4 you just need to add one class only. Try this:

<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>

score -1 · Answer 5 · answered Sep 17 '19 at 05:35

You can try this.

<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>

Center align three or more font awesome icons in the same row

5 Answers5