Я новичок в мире CSS и HTML, поэтому приношу свои извинения заранее.

У меня проблема с тем, чтобы значки моих социальных сетей располагались в нижней части моего веб-сайта. Они сидят тяжелее внизу, а не в середине нижнего колонтитула. Прилагается снимок экрана проблемы и кода, стоящего за ней.

Изображение текущего нижнего колонтитула


ИНФОРМАЦИЯ КОДА:

.page-footer {
  background-color: #F06D71;
  padding: 1em;
}
<footer class="page-footer">
  <ul>
    <img class="responsive-img" src="http://placehold.it/50x50">
    <img class="responsive-img" src="http://placehold.it/50x50">
    <img class="responsive-img" src="http://placehold.it/50x50">
  </ul>
</footer>

Я попытался добавить «padding-bottom» к таблице стилей, но значки стали меньше, а сдвинулись на несколько пикселей вверх.

Любой совет или какие-либо условия, на которые я должен обратить внимание?

Отношении

0
dosebot 6 Сен 2016 в 00:35

4 ответа

Лучший ответ

Используйте Flexbox:

.page-footer{
 display:flex;
}

.page-footer ul{
 align-items:center;
}

Это позволит центрировать значки по вертикали внутри нижнего колонтитула. У вас также должны быть изображения, заключенные в теги <li> в списке как элементы списка. Если вы также хотите красиво центрировать их по вертикали, вы можете добавить display: inline-block к элементам списка и text-align center к его родительскому, неупорядоченному списку. Итак, окончательный код будет:

.page-footer{
  display:flex;
}

.page-footer ul{
  justify-content:center;
  text-align:center;
}

.page-footer ul li{
  display:inline-block;
 }

Также я заметил еще одну вещь: вы добавили одинаковый идентификатор ко всем трем изображениям. ID должен быть уникальным идентификатором и использоваться только в одном элементе.

0
Neil K 6 Сен 2016 в 15:31

Вот отличный инструмент для этого.

0
pa7ryk 5 Сен 2016 в 21:39

Простое решение:

Для класса .page-footer добавьте свойство display: table;

Затем оберните теги изображений в <div> и присвойте свойство display: table-cell блоку div, а также свойство vertical-align: middle;.

Это приведет к вертикальному выравниванию всего, что находится внутри этого div, по середине элемента.

См. Этот JsFiddle, который я сделал в качестве демонстрации.

0
Jesse Elser 5 Сен 2016 в 22:08

Это не всегда очевидно даже для опытного разработчика. Если вы хотите, чтобы в нижнем колонтитуле были только изображения, вы можете просто заполнить его. Также у вас отсутствует <li> внутри тега <ul>. Вот пример:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style>
    .footer-list-item {
      list-style-type: none;
      display: inline-block;
    }

    .footer-list {
      padding: 50px 0;
      background: pink;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="footer">
    <ul class="footer-list">
      <li class="footer-list-item"><img width="50" src="https://static.jsbin.com/images/dave.min.svg" alt="Welcome to JS Bin"></li>
      <li class="footer-list-item"><img width="50" src="https://static.jsbin.com/images/dave.min.svg" alt="Welcome to JS Bin"></li>
      <li class="footer-list-item"><img width="50" src="https://static.jsbin.com/images/dave.min.svg" alt="Welcome to JS Bin"></li>
    </ul>
  </div>
</body>
</html>

JSBin ссылка

0
Dana Filimon 5 Сен 2016 в 23:00