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>

主块具有下一种样式：

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

我怎样才能使两个块垂直居中？我无法在flex中使用method，因为它会破坏我的内联样式。另外，由于我不知道position: absolute的高度和宽度，因此我似乎无法使用img。

有帮助吗？

Answer 1

垂直堆叠它们，将它们包装成div并使用相对位置即可。

position: relative;
top: 50%;

他们将包装纸顶部到外箱的距离设置为外箱高度的50％。

transform: translateY(-50%);

尽管此转换将使包装器平移包装器高度的50％。两者的结合导致包装纸的垂直位置。

.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>

Answer 2

将此添加到CSS：

Postion: absolute;
Left: 0px;
Top: 0px;
Transform: translate(0vw, -4.5vh);}

说明：这会使对象卡在左上角。然后使用Transform:进行移动 Transform:中的格式可以为px,% and vw/vh。

对所有对象执行此操作将完全控制它们的位置，但请确保所有内容都是可伸缩的（我建议使用vh/vw格式）：-）

编辑：在每个<div>上都具有完全相同的类将使放置对象和Transform:变得困难：-）

Answer 3

我建议您习惯Flexbox，请查看完整指南here

在主块中间垂直对齐两个块

3 个答案: