html - 用css实现垂直对齐 :after

Question

我可以通过给它一个兄弟并分配元素及其显示的兄弟属性来垂直对齐它的父元素:inline-block和vertical-align:middle。如果我然后给兄弟元素 100% 的高度，它将把我的目标元素带到父元素的垂直中心。如果我给同级元素一个 0px 的宽度，它就会变得不可见，并且目标元素保持垂直居中。

我想在不需要显式添加兄弟元素的情况下实现同样的效果。我一直在尝试使用 css :after。

这是我目前的尝试 https://jsfiddle.net/c99uhqe3/1/

<div class="parent">
  <img class="vertically-align" src="http://mathleadership.org/wp-content/uploads/2012/05/Button-Blank-Red-icon-e1445979777142.png" />
  <!--div class="vertical-aligner"></div-->
</div>

.parent {
  width: 400px;
  height: 400px;
  border: solid 1px #999999;
  text-align: center;
}

.vertically-align {
  display: inline-block;
  vertical-align: middle;
}
.vertically-align::after {
  content: ' ';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  width: 0px;
}

.vertical-aligner {
  display: inline-block;
  vertical-align: middle;
  height: 100%;
  width: 0px;
}

在这个 fiddle 中，我将垂直对齐与显式兄弟一起使用。取消注释 html 中的兄弟项，您将看到它按预期工作。

但到目前为止，我无法通过在目标之后创建一个 sudo 元素来实现这种效果。

我正在尝试做的事情是否可行？如果是这样，我做错了什么？

感谢您的帮助。

Answer 1

你设置::after在错误的选择器上，它应该在容器上设置。

关于伪元素的一些解释 - :after或 ::after ¹，插入 content:''就在结束标签之前。在这种情况下，它将是 <div> <img> *here* </div> .

它如何使图像居中？首先你需要设置一个height在容器上(你已经这样做了)，并将伪元素设置为 display:inline-block ，所以 height:100%可以申请。 <img>默认也是内联级别，他们是 sibling 。内联元素有一个很大的特性就是垂直对齐，它通常是相对于最高的兄弟元素。

因此，它使用 vertical-align:middle 将图像垂直居中².

.parent {
  width: 150px;
  height: 150px;
  border: solid 1px #999;
  text-align: center;
}
.parent::after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

<div class="parent">
  <img src="http://i.imgur.com/U5jwC4M.png" />
</div>

¹ _{https://developer.mozilla.org/en-US/docs/Web/CSS/::after}

² _{https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align}