如何在文本上方水平居中放置图标没有flexbox / grid？

如何解决如何在文本上方水平居中放置图标没有flexbox / grid？

我正在进行psd转换，我需要将字体真棒图标水平居中放置在文本上方，而无需使用flexbox和grid。包装它们的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;
  }

解决方法

在您的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;
}

应将图标置于文字上方

,

我将您的代码编辑为：

.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％的余量。您想将它们居中，所以我给了绝对位置占25％的多余空间，并在.info-section-container中添加了justify-conter：center以将三个文本水平居中。

我选择将display作为flex来具有列的flex方向。

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

希望我能帮上忙。

,

如果您要做的只是将所有<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元素设置为行内和文本对齐中心
• 您需要在.fas选择器中加入.contact-icons才能覆盖默认CSS

您可以在下面看到它的工作-注意，我添加了一个650px的媒体查询，因此您可以在查看展开的代码段时将其堆叠在此处并水平放置。

/* 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，因为CDN上没有5。主要区别在于类是.fa而不是.fas