Question

我读了很多东西要尝试，但仍然无法实现这一点。我有一些包含一些内容的div，我希望内容垂直和水平居中。当我在下面做的时候，它们垂直居中，但向右倾斜。如果我删除了<div class="table"> <div class="cell left"></div> <div class="cell right"> Lorem ipsum dolor sit amet </div> </div>，它们会水平居中，但要证明顶部是正确的。

display: table-cell

Answer 1

我试过你的例子，这很好用。是否在某个浏览器中它不适合您？

.contents {
  height:100px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  background: red;
}

<div class='contents'>
  <span>a span</span>
  <br>
  <span>b span bit longer</span>
  <br>
  <span>c span</span>
</div>

Answer 2

您可能有另一个具有更高特异性的CSS声明。这是一个例子：

#container div {
  text-align:left;  
}
.contents {
  height: 100px;
  width:100px;
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  background: green;
}

<div id="container">
  <div class='contents'>
    <span>a span</span>
    <br>
    <span>splurge b span</span>
    <br>
    <span>c span</span>
  </div>
</div>

This article也可能会有所帮助。

HTML：水平和垂直居中div的内容？

2 个答案: