为什么垂直对齐：中间不适用于我的跨度或 div？

小编典典

为什么垂直对齐：中间不适用于我的跨度或 div？

all

我试图在另一个元素中垂直居中一个span或元素。但是，当我输入
时，什么也没有发生。我尝试更改这两个元素的属性，但似乎没有任何效果。div``div``vertical-align: middle``display

这是我目前在我的网页中所做的：

.main {

  height: 72px;

  vertical-align: middle;

  border: 1px solid black;

  padding: 2px;

}



.inner {

  vertical-align: middle;

  border: 1px solid red;

}



.second {

  border: 1px solid blue;

}


<div class="main">

  <div class="inner">

    This box should be centered in the larger box

    <div class="second">Another box in here</div>

  </div>

</div>

这是一个显示它不起作用的实现的 jsfiddle：http:
//jsfiddle.net/gZXWC/

阅读 108

2022-04-18

共1个答案

小编典典

这似乎是最好的方法 - 自从我原来的帖子以来已经过去了一段时间，这就是现在应该做的：

.main {
  display: table;

  /* optional css start */
  height: 90px;
  width: 90px;
  /* optional css end */
}

.inner {
  border: 1px solid #000000;
  display: table-cell;
  vertical-align: middle;
}


<div class="main">
  <div class="inner"> This </div>
</div>

2022-04-18