Question

我可以通过给它一个兄弟并且分配元素及它的兄弟属性display：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;
}

在这个小提琴中，我有垂直对齐与明确的兄弟一起工作。取消注释html中的兄弟，你会发现它按预期工作。

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

我正在尝试做甚么可能吗？如果是这样，我做错了什么？

感谢您的帮助。

Answer 1

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

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

它如何使图像居中？首先，您需要在容器上设置height（您已经这样做了），并将伪元素设置为display:inline-block，以便height:100%可以应用。 <img>默认情况下也是内联级别，它们是兄弟姐妹。内联元素具有垂直对齐的强大功能，通常相对于最高的兄弟。

因此，它使图像与vertical-align:middle ²垂直居中。

＆＃13;

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

＆＃13;

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

＆＃13;

¹ <子> https://developer.mozilla.org/en-US/docs/Web/CSS/::after

² <子> https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align

Answer 2

当然不是主题，但由于Flexbox，不再需要这种erm .... trickery 。

＆＃13;

.parent {
  width: 200px;
  height: 200px;
  border: solid 1px #999999;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

＆＃13;

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

＆＃13;

Answer 3

使用CSS3 flex您只需要为父级定义flex样式：）

.parent {
  width: 180px; height: 180px; border: solid 1px #999999;

  display: flex;
  align-items: center;
  justify-content: center;
}

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

用css实现垂直对齐：after

3 个答案: