沿另一个DIV垂直对齐DIV

Question

我正在使用Bootstrap并在此处重新创建了我的问题：

https://jsfiddle.net/nxkzxd2b/1/

我试过了：

.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

这应该可以解决问题：

.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%);
}

Answer 3

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

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