Div не центрируется при использовании display: table-cell

html css

510 просмотра

2 ответа

Я использую display: tableдля моего htmlвместе с display: table-cellдля меня в bodyпоследнее время, чтобы сделать все содержание моей страницы появляются в самом центре экрана. Хотя это работает с абзацами, заголовками, входными данными, ярлыками и т. Д. (Насколько я тестировал, по крайней мере), оно не работает с divэлементами.
Есть ли способ сделать эту работу для divэлементов, как это делает для других? Чистое решение CSS будет лучшим.

Пример ( также на Codepen )

html {
  display: table;
  height: 100%;
  width: 100%;
  text-align: center;
}
body {
  display: table-cell;
  vertical-align: middle;
}
.hidden {
  display: none;
}
.leaf {
  border-radius: 15px 2px 15px 2px;
  border: 1px solid green;
  background-color: green;
  width: 250px;
  height: 80px;
}
<div class="leaf">Why am I not centered?</div>
<p>And why am I centered?</p>

Автор: Angelos Chalaris Источник Размещён: 08.11.2019 10:57

Ответы (2)


5 плюса

Решение

Просто добавь margin: 0 auto;.. Работай правильно.

html {
  display: table;
  height: 100%;
  width: 100%;
  text-align: center;
}
body {
  display: table-cell;
  vertical-align: middle;
}
.hidden {
  display: none;
}
.leaf {
  border-radius: 15px 2px 15px 2px;
  border: 1px solid green;
  background-color: green;
  width: 250px;
  height: 80px;
  margin:0 auto;

}
<div class="leaf">Why am I not centered?</div>
<p>And why am I centered?</p>

Автор: Prasath V Размещён: 20.08.2016 06:18

1 плюс

Просто добавьте поля: 0 авто; к классу .leaf

html {
  display: table;
  height: 100%;
  width: 100%;
  text-align: center;
}
body {
  display: table-cell;
  vertical-align: middle;
}
.hidden {
  display: none;
}
.leaf {
  margin: 0 auto;
  border-radius: 15px 2px 15px 2px;
  border: 1px solid green;
  background-color: green;
  width: 250px;
  height: 80px;
}
<div class="leaf">Why am I not centered?</div>
<p>And why am I centered?</p>

Автор: Divsign Размещён: 20.08.2016 06:18
Вопросы из категории :
32x32