Блог

Главная - Вопросы по программированию - Выравнивание элементов внутри свернутой нижней панели на мобильных устройствах

Выравнивание элементов внутри свернутой нижней панели на мобильных устройствах

#html #css

#HTML #css — код

Вопрос:

У меня есть нижняя панель, которая будет сворачиваться при прокрутке. Я не могу выровнять его содержимое по вертикали по центру, что бы я ни делал.

 .Bar {
  background-color: rgba(245, 245, 245, 1.0);
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 12vh;
}

.barElement {
  background-color: red;
  height: 100%;
  width: 22%;
  float: left;
}

.barEContainer {
  background-color: green; /* this one will not be vertically centered! */
  height: 50%;
  margin-top: 25%;
} 
 <div class="Bar" id="Bar">
  <div class="barElement">
    <div class="barEContainer">
    </div>
  </div>
</div>

Они barEContainer никогда не будут выровнены по вертикали. Я хотел бы поместить его (здесь зеленый фон) точно посередине.

На разных экранах мобильных устройств он будет отображаться вертикально в разных положениях (не посередине).

Ответ №1:

Сделайте свой barElement гибкий ящик с align-items: center возможностью вертикального центрирования. Также добавьте width: 100% barEContainer и удалите его margin-top — см. Демонстрацию ниже:

 .Bar {
  background-color: rgba(245, 245, 245, 1.0);
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 12vh;
}

.barElement {
  background-color: red;
  height: 100%;
  width: 22%;
  float: left;
  display: flex; /* added */
  align-items: center; /* added */
}

.barEContainer {
  background-color: green; /* this one will not be vertically centered! */
  height: 50%;
  /* margin-top: 25%;*/
  width: 100%; /* added */
} 
 <div class="Bar" id="Bar">
  <div class="barElement">
    <div class="barEContainer">
    </div>
  </div>
</div>
Метки: