垂直对齐：元素后答案

【问题标题】：Vertical align :after element垂直对齐：元素后
【发布时间】：2015-07-15 00:48:45
【问题描述】：

我尝试了各种回复here，但没有运气。

我需要垂直对齐后元素：

content: "";
width: 30px;
height: 15px;
background: transparent url('/img/test.png') no-repeat;
float: right;
border: 1px solid red;

这不起作用：

vertical-align: middle;

也没有：

vertical-align: -50%;

【问题讨论】：

浮动和垂直对齐不能一起工作:)
谢谢，不幸的是，当我将其取下并使用内联显示时，它消失了。

标签： css

【解决方案1】：

从链接到的那些答案中，当我将父元素设置为 vertical-align:top; 时，元素上的 vertical-align:inherit; 对我有用，但似乎没有其他东西对我有用。

【讨论】：

【解决方案2】：

你可以在父元素上使用line-height，在伪:after上使用display:inline-block

.box {
  width: 100px;
  height: 100px;
  background: #CCC;
  line-height: 100px;
  text-align: center;
}
.box:after {
  content: "";
  width: 30px;
  height: 15px;
  background: transparent;
  border: 1px solid red;
  display: inline-block;
}

演示：https://jsfiddle.net/tianes/zhwL3rrq/

【讨论】：