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

Question

I am working on psd conversion and I need to center the font awesome icons horizontally above the text without using flexbox and grid. The ul that wraps them will be stacking vertically on mobile.

I need to accomplish this by using only css. Any help is appreciated.

 <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

add some flex container on your 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>

and a couple of new flex classes

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

should make the icon above the text

Answer 2

I edited your code as:

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

First, I adjusted width of info-link as 50vw. It covers the half of the width of screen. Therefore, it has 25% margin from both left and right. You want to center them, so I gave extra left which is 25% in absolute position and added justify-conter: center in .info-section-container to center the three texts horizontally.

I chose display as flex to have column flex direction.

Then, in .info-section-container, I added align-items: center to center vertically these three items.

Hope I helped.

Answer 3

If all you want to do is centre all the <li> items and the icons, then you need very few changes. All you really need to do is add the following rules:

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

How these work:

• The biggest problem is the left and right margins of 25% on info-section-container - this is too big on mobile and the text doesn't fit, it juts out to the right.
  To centre the whole container use margin: 0 auto; . If you want to limit its size, you can use max-width
• <ul> elements have padding on the left which will affect the centre alignment, so you need to set it to 0
• Set your info-link elements to be inline-block and text-align center
• You need to include .fas in the .contact-icons selector to override the default CSS

You can see this working below - note I have added a media query for 650px so you can see it stacked here and horizontal in you view the snippet in expanded.

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

FYI I am using Font Awesone 4.7 above because 5 isn't available on a CDN. The main difference is the class is .fa instead of .fas