Блог

Главная - Вопросы по программированию - Как сделать центр моего горизонтального списка в центре нижнего колонтитула

Как сделать центр моего горизонтального списка в центре нижнего колонтитула

#html #css #flexbox

Вопрос:

Я пытаюсь расположить свой горизонтальный список по центру нижнего колонтитула. Это то, что у меня есть до сих пор в моем HTML.

 .footer-container {
  display: flex;
  justify-content: center;
  flex-direction: row;
}

.social-media li {
  display: inline;
  list-style: none;
  background-color: gray;
  margin: 25px;
  padding: 10px;
} 
 <footer>
  <div class="footer-container">
    <div class="social-media">
      <ul>
        <li>Facebook</li>
        <li>Twitter</li>
        <li>LinkedIn</li>
        <li>Pinterest</li>
        <li>Instagram</li>
      </ul>
    </div>

  </div>

</footer>

Я хочу, чтобы список находился в мертвой точке всего белого пространства. Мы очень ценим любую помощь.

Ответ №1:

ul по умолчанию имеет некоторое левое заполнение. Вы можете удалить его, применив padding-left: 0px :

 .footer-container{
    display: flex;
    justify-content: center;
    flex-direction: row;
    
}

.social-media li{
    display: inline;
    list-style: none;
    background-color: gray;
    margin: 25px;
    padding: 10px;
}


.social-media ul{
  padding-left:0px;
} 
 <footer>
        <div class="footer-container">
            <div class="social-media">
                <ul>
                    <li>Facebook</li>
                    <li>Twitter</li>
                    <li>LinkedIn</li>
                    <li>Pinterest</li>
                    <li>Instagram</li>
                </ul>
            </div>

        </div>

    </footer>
Метки: