如何在文本上方水平居中图标（无弹性框/网格）？

Question

我正在处理 psd 转换，我需要在不使用弹性框和网格的情况下将字体真棒图标水平居中于文本上方。包裹它们的 ul 将在移动设备上垂直堆叠。

我需要通过仅使用 css 来完成此操作。任何帮助表示赞赏。

 <div class="info-section">
      <!-- <div class="wrapper clearfix"> -->
        <section class="info-section-container">
          <ul>
            <li><a href="#" class="info-link"><i class="fas fa-location-arrow contact-icons" aria-hidden="true"></i>Locations</a></li>
            <li><a href="#" class="info-link"><i class="fas fa-ticket-alt contact-icons" aria-hidden="true"></i>Tickets</a></li>
           <li><a href="#" class=info-link><i class="fas fa-phone contact-icons" aria-hidden="true"></i>Reach Out</a></li>
        </ul>
      <!-- </div> -->
      </div>

/* this centers the entire container  */
 .info-section-container {
    /* width: 50%; */
    text-align: center;
    margin: 0 25%;

  }

  /* to position the li horizontally */
  .info-section-container ul li {
    float: left;
  }

  .info-link  {
  font-family: 'Montserrat', sans-serif;
  font-size: 3rem;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  /* for accesability */
  padding: 10px;
  /* width: 30%;
  display: inline-block; */
 }

  .contact-icons {
    display: block;
    text-align: center;
    padding-bottom: 20px;
  }

Answer 1

如果您只想将所有<li> 项目和图标居中，那么您只需进行很少的更改。您真正需要做的就是添加以下规则：

.info-section-container {  margin: 0 auto; }
.info-section-container ul { list-style: none; padding: 0; }
.info-link {  text-align: center; display: inline-block; /* and your own styles here */ }
.fas.contact-icons { display:block; }

它们的工作原理：

• 最大的问题是info-section-container 的左右边距为 25% - 这在移动设备上太大了，文本不适合，它会突出到右边。
  要使整个容器居中，请使用margin: 0 auto;。如果你想限制它的大小，你可以使用max-width
• <ul> 元素左侧有填充，会影响居中对齐，所以需要设置为 0
• 将 info-link 元素设置为 inline-block 和 text-align center
• 您需要在 .contact-icons 选择器中包含 .fas 以覆盖默认 CSS

您可以在下面看到它的工作原理 - 请注意，我添加了一个 650 像素的媒体查询，因此您可以看到它堆叠在此处，并且在您查看展开的 sn-p 时是水平的。

/* this centers the entire container  */
.info-section-container {
  max-width: 1000px;
  text-align: center;
  margin: 0 auto;
}

.info-section-container ul {
  list-style: none;
  display: inline-block;
  padding: 0;
}

.info-section-container ul li {
  text-align: center;
  margin: 20px 0;
  display: inline-block;
}

.info-link {
  font-family: 'Montserrat', sans-serif;
  font-size:3em;
  font-weight: 700;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  /* for accesability */
  padding: 10px;
}

.fa.contact-icons, /* for this demo only */
.fas.contact-icons {
  display: block;
  padding-bottom:10px;
}

@media screen and (max-width: 650px){
  .info-section-container ul li { display: block;}
}

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

<div class="info-section">
  <section class="info-section-container">
    <ul>
      <li><a href="#" class="info-link"><i class="fa fa-location-arrow contact-icons" aria-hidden="true"></i>Locations</a></li>
      <li><a href="#" class="info-link"><i class="fa fa-ticket contact-icons" aria-hidden="true"></i>Tickets</a></li>
      <li><a href="#" class=info-link><i class="fa fa-phone contact-icons" aria-hidden="true"></i>Reach Out</a></li>
    </ul>
  </section>
</div>

仅供参考，我使用上面的 Font Awesone 4.7，因为 5 在 CDN 上不可用。主要区别在于类是.fa 而不是.fas

Answer 2

在你的 ul 上添加一些 flex 容器

<ul class="flex-container">
    <li><a href="#" class="info-link"><i class="fas fa-location-arrow contact-icons" aria-hidden="true"></i>Locations</a></li>
    <li><a href="#" class="info-link"><i class="fas fa-ticket-alt contact-icons" aria-hidden="true"></i>Tickets</a></li>
    <li><a href="#" class=info-link><i class="fas fa-phone contact-icons" aria-hidden="true"></i>Reach Out</a></li>
</ul>

还有几个新的 flex 类

.flex-container {
    display: flex;
}
.flex-container li {
    display: flex;
    flex-direction: column;
}

应该让图标在文字上方

Answer 3

我将您的代码编辑为：

.info-section-container {
     align-items: center;
     justify-content: center;
     text-align: center;
     position: absolute;
     left: 25%;
}

.info-link {
     width: 50vw;
     height: 30vh;
     display: flex;
     flex-direction: column;

     margin-top: 5%;
     margin-bottom: 5%;
  
     font-family: 'Montserrat', sans-serif;
     font-size: 3rem;
     font-weight: 700;
     text-transform: uppercase;
}

<div class="info-section">
        <div class="info-section-container">
            <a href="#" class="info-link"><i class="fas fa-location-arrow contact-icons" aria-hidden="true"></i>Locations</a>
            <a href="#" class="info-link"><i class="fas fa-ticket-alt contact-icons" aria-hidden="true"></i>Tickets</a>
           <a href="#" class=info-link><i class="fas fa-phone contact-icons" aria-hidden="true"></i>Reach Out</a>
      </div>
 </div>

首先，我将信息链接的宽度调整为 50vw。它覆盖了屏幕宽度的一半。因此，它从左右两边都有 25% 的边距。你想让它们居中，所以我给了额外的 left，它是绝对位置的 25%，并在 .info-section-container 中添加了 justify-conter: center 以使三个文本水平居中。

我选择 display as flex 来设置列的 flex 方向。

然后，在 .info-section-container 中，我添加了 align-items: center 以垂直居中这三个项目。

希望我能帮上忙。