0

Есть блок div с классом .center-please который необходимо расположить по центру вертикально и горизонтально. Если в .b-item впишу просто текст, то он строго по центру.

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.b {
  display: table;
  width: 100%;
  height: 100px;
  max-width: 1000px;
  margin: 0 auto;
}
.b-item {
  display: table-cell;
  vertical-align: top;
  border: 2px solid #000;
  padding: 15px;
}
.b-item:nth-of-type(1),
.b-item:nth-of-type(3) {
  width: 200px;
}
.b-item:nth-of-type(2) {
  border-left: 0;
  border-right: 0;
  vertical-align: middle;
  text-align: center;
}
.center-please {
  // Как расположить div по центру?

}
<div class="b">
  <div class="b-item">
    200px
  </div>
  <div class="b-item">
    100% - 400px
  </div>
  <div class="b-item">
    <div class='center-please'>
      <button>Кнопка 1</button>
      <br>
      <button>Кнопка 2</button>
    </div>
  </div>
</div>

2
  • Точно также, как вы сделали для второго .b-item. 13 янв 2017 в 9:38
  • Но выравнивает он только по горизонтали, а не вертикали 13 янв 2017 в 9:49

2 ответа 2

1

В вашем коде vertical-align: middle; стоял только для 2 блока.

Кроме того, извращение с удалением границ среднего блока - лишнее. Надо всей таблице поставить border-collapse: collapse;

Таблица и ячейки должны иметь float:none; В примере это не важно, но на реальной странице нужно, если свойство float будет унаследовано.

Кнопки по <br> будут смещены относительно друг друга. Поэтому <br> удален, а кнопкам задан класс .btn {display: block; margin: auto;}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.b {
  display: table;
  float: none;
  width: 100%;
  height: 100px;
  max-width: 1000px;
  margin: 0 auto;
  border-collapse: collapse;
}
.b-item {
  display: table-cell;
  float: none;
  vertical-align: top;
  border: 2px solid #000;
  padding: 15px;
}
.b-item:nth-of-type(1),
.b-item:nth-of-type(3) {
  width: 200px;
}
.b-item:nth-of-type(2) {
  vertical-align: middle;
  text-align: center;
}
.b-item:nth-of-type(3) {
  vertical-align: middle;
  text-align: center;
}
.center-please {
  // Как расположить div по центру?

}
button.btn {
  display: block;
  margin: auto;
}
<div class="b">
  <div class="b-item">
    200px
  </div>
  <div class="b-item">
    100% - 400px
  </div>
  <div class="b-item">
    <div class='center-please'>
      <button class="btn">Кнопка 1</button>
      <button class="btn">Кнопка 2</button>
   </div>
  </div>
</div>

0

Есть еще такой вариант:

.center-please {
  display: flex;
  flex-flow: column;
  align-items: center;
}

если я конечно вас правильно понял)

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.