@Web-proger
Начинаю изучение HTML и CSS

Как прижать блок с position: absolute к низу и выровнять по центру?

Нужно отцентровать блок с Абсолютным позиционированием и при этом чтобы он был прижат к низу.
В блоке также есть ещё один блок с float: left.
В общих чертах обрисовал тут: https://jsfiddle.net/948hbquy/3/
p.s. размер блока с абсолютным позиционированием может меняется, поэтому добавление в код:
left:50%; margin-left: -XXpx; думаю не будет уместно.
Подскажите как быть?
  • Вопрос задан
  • 1759 просмотров
Решения вопроса 2
HamSter007
@HamSter007
HTML/CSS верстальщик
{  
  position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
}
Ответ написан
inferusvv
@inferusvv
Front-End Developer
Можно попробовать сделать так:

left: 50%;
transform: translateX(-50%);


https://jsfiddle.net/948hbquy/4/

Но если у вас ширина блока нечетного количества пикселей, то его размоет. Второе вариант - черный блок завернуть в другой блок и уже ему делать абсолютное позиционирование. А черный отцентрировать через margin: 0 auto;
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@Web-proger Автор вопроса
Начинаю изучение HTML и CSS
Прошу прощения за оффтоп ... но как тут оценивать и чей ответ отмечать решением непонимаю.
Оба помогли. HamSter - первее ответил, но Владислав Безенсон, дал более развернутый ответ и два варианта решения ..
Ответ написан
В вашем коде надо добавить:
.abs {
  position: absolute;
  height: 50px;
  width: 50px;
  background: black;
  bottom: 0;
  color: #fff;
  left:50%;
  margin-left:-25px;
}


Но Я бы рекомендовал внизу сделать блок на всю ширину, который будет прижать к низу! с свойствами: text-align:center; А внутри него другой блок с свойствами display:inline-block; и тогда он станет по центру, и привязываться к действительным размерам не придется.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы