如何使图标在文本上方水平居中（无 flexbox/grid）？

Question

我正在处理 psd 转换，我需要在不使用 flexbox 和网格的情况下将很棒的字体图标水平居中放置在文本上方。包裹它们的 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

在你的 ul 上添加一些弹性容器

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

我将您的代码编辑为：

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

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

我选择了 display as flex 来让列有 flex 方向。

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

希望我有所帮助。

Answer 3

如果您只想让所有 <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>元素左边有padding会影响居中对齐，需要设置为0
将 info-link 元素设置为 inline-block 和 text-align 中心
您需要在 .contact-icons 选择器中包含 .fas 以覆盖默认的 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，因为 5 在 CDN 上不可用。主要区别是 class 是 .fa 而不是 .fas

如何使图标在文本上方水平居中（无 flexbox/grid）？

How to center icons horizontally above text (no flexbox/grid)?

html

css

layout

responsive-design