居中对齐同一行中的三个或更多字体真棒图标

Question

我通常会使用 margin: auto;、text-align: center; 或 left: 50%; transform: translateX(-50%); 将图标居中对齐。但我不知道如何居中对齐三个图标。我认为在包装 div 上使用这些策略会奏效，但事实并非如此。我需要像这样将它们全部放在同一行中：

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

使用 flexbox 来实现它。

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

这是您要找的吗？

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

您也可以使用 Display:grid 检查代码段。

.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

如果您正在使用 Bootstrap-4，您只需添加一个 class。试试这个：

<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

你可以试试这个。

<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

html

css

less