выровнять нижний колонтитул по центру с полями вниз страницы - PullRequest
Новая
       12

выровнять нижний колонтитул по центру с полями вниз страницы

0 голосов
/ 01 марта 2019

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

Пример выполнения

CSS: 

#footer {
display: flex;
align-content: center;
justify-content: center;
margin: 20px;
position: fixed;
width:90%;
bottom: 0;
}

#footer {
background: #0070FF;
line-height: 2;
text-align: center;
color: #042E64;
font-size: 30px;
font-family: sans-serif;
font-weight: bold;
text-shadow: 0 1px 0 #84BAFF;
box-shadow: 0 0 15px #00214B
}

HTML: 

<div id="footer">Footer - Just scroll...</div>

1 Ответ

0 голосов
/ 01 марта 2019

Есть много способов сделать это, но самое простое решение с вашим кодом выше - это использовать calc.Проблема в том, что вы смешиваете проценты и фиксированные значения - но это именно то, для чего предназначен calc.

Вот что я сделал:

  • Изменена ширина с 90% в calc(100% - 40px) (20px на каждой стороне)
  • Установить left в 20px
  • Установить bottom в 20px; 

#footer {
display: flex;
align-content: center;
justify-content: center;
left: 20px;
position: fixed;
width: calc(100% - 40px);
bottom: 20px;
}

#footer {
background: #0070FF;
line-height: 2;
text-align: center;
color: #042E64;
font-size: 30px;
font-family: sans-serif;
font-weight: bold;
text-shadow: 0 1px 0 #84BAFF;
box-shadow: 0 0 15px #00214B
}
<div id="footer">Footer - Just scroll...</div>
...