Question

我使用以下方法在未知高度的div中垂直居中未知高度的元素。

http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

我居中的元素是锚标记，所以这个答案解决了位置相对问题。

When to use position absolute vs position relative when vertically aligning with css

但是，由于我有一个元素紧挨着另一个元素，因此在使用position:absolute

时它们会重叠

有什么方法可以解决这个问题吗？（我不能使用flexbox）

HTML ：

<div class"parent-container">
  <a href="">Some content</a>
  <a href=""><img src""></a>
</div>

CSS

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

.parent-container a {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
}

Answer 1

让孩子内联阻止并使用vertical-align:middle。无需定位。

a {
  vertical-align: middle;
  display: inline-block;
}
.parent-container {
  text-align: center;
  background:palegoldenrod
}

<div class="parent-container">
  <a href="">Some content</a>
  <a href="">
    <img src="http://www.fillmurray.com/140/100">
  </a>
</div>

如果包含的父级高于内容，则可以使用伪元素。

a {
  display: inline-block;
  vertical-align: middle;
}
.parent-container {
  text-align: center;
  height: 150px;
  background: pink;
}
.parent-container::before {
  content: '';
  height: 100%;
  display: inline-block;
  vertical-align: middle;
  margin-right: -0.25em;
  /* Adjusts for spacing */
}

<div class="parent-container">
  <a href="">Some content</a>
  <a href="">
    <img src="http://www.fillmurray.com/140/100">
  </a>
</div>

垂直居中，绝对位置，多个元素

1 个答案: