Как сосредоточить эти нижние колонтитулы?

Если вы перейдете на страницу http://www.leapfm.com и прокрутите вниз до нижнего колонтитула, вы увидите, что ссылки находятся в правой нижней части.

Как я могу положить em 'в центр?

Пожалуйста, используйте Firebug или проверяйте элемент для легкого доступа к коду.

6 ответов

Поэтому я начну сверху вниз из div class= "footer", вам нужно будет изменить или добавить эти свойства css:

.footer {
 display: block;
 text-align: center;
 width: auto;
}

Ли для ссылок внутри нижнего колонтитула:

.footer li {
 display: inline-block;
}

Затем теги внутри указанных выше тегов li:

.footer li a {
 display: inline-block;
 float: none;
}


Вложите li-элементы правильно в ul и установите margin: 0 auto на нем.

Вместо использования li-элементов в качестве разделителей вы можете использовать li + li:before { content: "|"; } li + li:before { content: "|"; }


Прежде всего, вы должны заключить каждый из этих LI в UL или OL.

Вопреки тому, что указали другие, вам не нужно указывать UL/OL в поле 0 auto, потому что оно уже займет все пространство, которое у него есть. Или дайте показание: блок нижнего колонтитула и выравнивание текста. Поэтому, когда вы устанавливаете text-align: center в li; они волшебным образом войдут в центр элемента. Нет необходимости центрировать родительский элемент (ul).

Кроме того, если вы хотите сделать что-то правильно, избавитесь от тега br и используйте поле или дополнение, чтобы коснуться вашего макета.

Так; все, что вам нужно добавить в свой код, это:

ul{
text-align:center;
}

ul li{
display:inline-block;
}

Извините, что ответила. Я бы скорее стал комментарием к верхнему ответу. У меня не хватает репутации для этого. Не слава охота!

Надеюсь это поможет


Удалить float:right; от .footer a и заключите, что вы - теги li с ul

<div>
 <ul>
 <li><a href="." target="_blank">Submit |</a></li>
 
 <li><a href="." target="_blank">FAQ | </a></li> 
 
 <li><a href="." target="_blank">Contact Us </a></li>
 </ul>
</div>


Попробуйте заключить

  • с помощью

      и после этого добавьте этот css:

      .footer {
       display: block;
       text-align: center;
      }
      .footer ul {
       margin: 0 auto;
      }
      .footer li {
       float: left;
       display: inline-block;
      }

  • Удалите CSS-float: право для объявления класса.

    .footer a {
     float: right; //Remove this
     display: block;
     margin-right: 5px;
     color: black;
    }

    licensed under cc by-sa 3.0 with attribution.