Адаптивное позиционирование по центру

#html #css #responsive #full-width

#HTML #css #адаптивный

Вопрос:

У меня есть фоновое изображение во всю ширину с некоторым содержимым. В конце я хочу расположить свои кнопки по центру (по вертикали и горизонтали), но с position:absolute это не работает. Вы можете увидеть это в JSFiddle.

Есть несколько строк кода из моего CSS

 .buttons{
    position:relative;
}

.buttons .button-pos{
  width:100%;
  position:absolute;
  margin:auto;
  top:0;
  bottom:0;
  left:0;
  right:0;
}

И есть небольшая схема того, чего я хочу.

Ответ №1:

1.) У вашего .buttons div нет высоты, поэтому сначала вам нужно определить для него высоту, иначе нет возможности центрирования по вертикали (я сделал это в fiddle на 200 пикселей).

2.) Для центрирования .button-pos внутри .buttons используйте

 .button-pos {
  width: 100%;
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
}

Вот в чем загвоздка: https://jsfiddle.net/Luo1k7Lt/1 /

Ответ №2:

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

 #welcome-header .welcome-content{
    width: 80%;
    height: 400px;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.buttons{
    margin-top: 40px;
}

1. но это не центрирование, это просто перемещение .buttons нижней части divs на 10% выше нижней части контейнеров. У него все еще нет высоты. Попробуйте еще раз переосмыслить мой ответ.

2. ?? margin-top: 40px не дает .buttons высоту (т. Е. По-прежнему не центрируется)

3. @Johannes для меня это решение подходит хорошо, но я все еще хочу центрировать только кнопки. Я центрирую весь контент, и это выглядит хорошо

Ответ №3:

Попробуйте это:

 .buttons .button-pos { 
    display: inline-block;
    zoom: 1;
}

Простой способ взлома IE — добавить display*: inline; в это правило CSS