Содержание нижнего колонтитула HTML не центрировано

0

Я хочу центрировать кнопку в нижней части страницы:

<footer>
    <div class="centerContent">
        <input name="submit" type="submit" />
    </div>
</footer>

Css:

.centerContent {
    text-align: center;
}

footer {
    clear: both;
    height: 100px;
    position: absolute;
    bottom: 0;
}

Если я удалю часть "нижнего колонтитула" Css, кнопка не находится в нижней части страницы, но, по крайней мере, она находится в горизонтальном центре страницы. Если я оставлю часть "нижнего колонтитула" в Css, кнопка находится в нижней части страницы, но..... она больше не будет горизонтально центрирована !!! Кто-нибудь знает почему? Большое спасибо.

Теги:

4 ответа

2
Лучший ответ

Для горизонтального выравнивания вы должны растянуть нижний колонтитул до полной ширины. Добавить width:100% до footer.

.centerContent {
    text-align: center;
}

footer {
    clear: both;
    height: 100px;
    position: absolute;
    bottom: 0;
    width: 100%;
}
Поделиться
  • 1
    footer: 100%; Упс :)
  • 0
    С орфографической ошибкой, спасибо
Показать ещё 1 комментарий
0

Добавьте left и right свойства в footer, оба установлены в 0:

footer {
    clear: both;
    height: 100px;
    position: absolute;
    bottom: 0;

    /* add the following lines */
    left: 0;
    right: 0;
}

Если вы добавите width: 100% вместо этого вместо width: 100% (как указывают другие варианты), footer может вывести страницу из-за каких-либо дополнительных полей и/или прокрутки.

Поделиться
0

Попробуйте добавить ширину: 100% к нижнему колонтитулу

footer {
  width: 100%;
  clear: both;
  height: 100px;
  position: absolute;
  bottom: 0;
}

position: absolute сделает нижний колонтитул по умолчанию потерянным.

Поделиться
0 
footer {
bottom: 0;
clear: both;
height: 100px;
position: absolute;
text-align: center;
width: 100%;
}
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню