沿另一个 DIV 垂直对齐 DIV

Question

我正在使用 Bootstrap 并在此处重现了我的问题：

我试过：

.square1 {
    vertical-align: middle;
}

.square1 {
  background-color: red;
  display: inline-block;
  width: 100px;
}

.square2 {
  background-color: blue;
  display: inline-block;
  width: 300px;
  height: 300px;
}

<div class="container">
  <div class="square1">
    <p>
      Div vertical center
    </p>
  </div>
  <div class="square2">
    <p>
      Text normal
    </p>
  </div>
</div>

我想将红色框沿蓝色框垂直对齐。我没有容器的固定高度。我该怎么做呢？

Answer 1

如果您想让 div 的垂直居中对齐，您需要对两个元素都应用 vertical-align: middle;。

CSS

.square1, .square2 {
  vertical-align: middle;
}

结果

.square1 {
  background-color: red;
  display: inline-block;
  width: 100px;
  vertical-align: middle;
}

.square2 {
  background-color: blue;
  display: inline-block;
  width: 300px;
  height: 300px;
  vertical-align: middle;
}

<div class="container">
  <div class="square1">
    <p>
      Div vertical center
    </p>
  </div>
  <div class="square2">
    <p>
      Text normal
    </p>
  </div>
</div>

JSFiddle

Answer 2

创建一个 class（类似于 valign-wrapper）并将其添加到您的 .container

.valign-wrapper{
    display: flex; 
    align-items: center;
}

Answer 3

这应该可以解决问题：

.container {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.square1,
.square2 {
    display: inline-block;
    width: 100px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

沿另一个 DIV 垂直对齐 DIV

Vertical align a DIV along another DIV

css

vertical-alignment