Блог

Главная - Вопросы по программированию - Как расположить значки по горизонтали над текстом (без гибкого поля / сетки)?

Как расположить значки по горизонтали над текстом (без гибкого поля / сетки)?

#html #css #layout #responsive-design

#HTML #css #макет #адаптивный дизайн

Вопрос:

Я работаю над преобразованием в psd, и мне нужно расположить значки font awesome по горизонтали над текстом без использования гибкого поля и сетки. 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;
  }

Ответ №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; }

Как это работает:

  • Самая большая проблема — это поля слева и справа по 25% на info-section-container — они слишком большие на мобильных устройствах, и текст не помещается, он выступает вправо.
    Для центрирования всего контейнера используйте 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>

К вашему сведению, я использую шрифт Awesone 4.7 выше, потому что 5 недоступен на CDN. Основное отличие заключается в том, что класс .fa вместо .fas

Комментарии:

1. Это здорово, я действительно ценю это! Это сработало как по волшебству. Небольшой вопрос относительно селектора .fas — какое правило CSS здесь переопределяется. Если я его не использую, на значке все еще отображается правило display: block, но на самом деле оно не работает.

2. @KarmenSalim Рад помочь! Причина, по которой .contact-block {display:block} в этом случае не работает, заключается в том, что стили Font Awesome включаются после этого CSS и переопределяют ваши настройки отображения. Используя .fas.contact-block , мы делаем селектор более конкретным, чтобы он не переопределялся. Вы можете узнать больше о специфике CSS здесь

Ответ №2:

добавьте какой-нибудь гибкий контейнер на свой 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;
}

должен ли значок располагаться над текстом

Комментарии:

1. Мне нужно выполнить это с помощью чистого css, без flexbox.

2. @KarmenSalim flexbox — это CSS … если есть причина, по которой вы не хотите его использовать, то вам следует указать это в своем вопросе, потому что в противном случае это правильный ответ.

3. @KarmenSalim есть ли старый целевой браузер, который вам нужно поддерживать? если не так, как говорили другие, Flexbox — это CSS. Если вы все еще сомневаетесь в этом, пожалуйста, проверьте caniuse.com/#feat=flexbox для совместимости

4. Извините, я не уточнил, я работаю над проектом для своего курса, и они не позволяют нам использовать flexbox, только CSS и floats для этого.

Ответ №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>

Сначала я настроил ширину информационной ссылки на 50 Вт. Он занимает половину ширины экрана. Следовательно, у него есть 25%-ный запас как слева, так и справа. Вы хотите расположить их по центру, поэтому я добавил дополнительный левый угол, который составляет 25% по абсолютной позиции, и добавил justify-conter: center в .info-section-container для центрирования трех текстов по горизонтали.

Я выбрал отображение как гибкое, чтобы иметь направление сгибания столбца.

Затем в .info-section-container я добавил align-items: center для центрирования этих трех элементов по вертикали.

Надеюсь, я помог.