html - 垂直对齐两个 block 在主 block 内居中

Question

我有这个 html 结构:

<div class="main-block">
  <div class="img-main"><img width="45" height="43" src="#" itemprop="image"></div>
  <div class="text">
    <p> First Block </p>
  </div>
</div>

<div class="main-block">
  <div class="img-main"><img width="45" height="43" src="#" itemprop="image"></div>
  <div class="text">
    <p> Second Block </p>
  </div>
</div>

<div class="main-block">
  <div class="img-main"><img width="45" height="43" src="#" itemprop="image"></div>
  <div class="text">
    <p> Third Block </p>
  </div>
</div>

<div class="main-block">
  <div class="img-main"><img width="45" height="43" src="#" itemprop="image"></div>
  <div class="text">
    <p> Lopreum Ipsum Text Two Rows</p>
  </div>
</div>

主 block 有下一个样式:

.main-block {
  width: 20%;
  max-width: 180px;
  display: inline-block;
  height: 135px;
  position: relative;
}

我怎样才能垂直居中两个 block ，一个在另一个下面？我不能将方法与 flex 一起使用，因为它会破坏我的内联样式。另外，看起来我不能使用 position: absolute 因为我不知道 img 高度和宽度。

有什么帮助吗？

Answer 1

将它们垂直堆叠，将它们包装到一个 div 中并使用相对位置就可以了。

position: relative;
top: 50%;

他们将 wrapper 顶部到外箱的距离设置为外箱高度的 50%。

transform: translateY(-50%);

虽然此转换会将包装器向上平移包装器高度的 50%。这两者的组合导致 wrapper 的垂直位置。

.main-block {
  height: 400px;
  background: silver;
}
.inner {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}
p {
  white-space: break-word;;
  display: block;
  width: 50px;
  margin: 0;
  padding: 0;
}
p:first-child{
  background: yellow;
}
p:nth-child(2) {
  background: red;
}

<div class="main-block">
  <div class='inner'>
    <p>
      12 31 23 as df sd zv      
    </p><p> TE XT sdaf  asdf asdf</p>
  </div>
</div>