垂直居中的内容:在伪元素之前/:之后

Question

我正在努力实现类似于这张图片的东西:

我有一个包含在div中的图像(作为幻灯片的一部分),并且使用:before和:after伪元素,我显示两个控件移动到幻灯片的下一个(>>)或前一个(<<)图像.

到目前为止,我有这个:

div {
  position: relative;
}

div:before {
  display:block;
  height: 100%;
  content: "stuff";
  position:absolute;
  top: 0; left: 0;
  text-align: center;
}

但是,我不能将伪元素的内容集中在一起,文本看起来像这样:

这有可能实现吗？如果没有,那么最具语义性的解决方法是什么？我不想把元素本身,只是它的内容集中.我希望将元素拉伸到100%高度.

编辑: http ://jsfiddle.net/rdy4u/

编辑2:此外,img是液体/液体,div/img的高度未知,宽度设置为800px和max-width80%.

Answer 1

假设你的元素不是<img>(因为自闭元素不允许伪元素),让我们假设它是a <div>,所以一种方式可能是:

div {
    height: 100px ;
    line-height: 100px;
}
div:before, div:after {
    content: "";
    ...
    display: inline-block;
    vertical-align: middle;
    height: ...;
    line-height: normal;
}

如果你不能改变div的行高,另一种方法是:

div {
    position: relative;
}
div:before, div:after {
    position: absolute;
    display: block;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    content: "";
    width: ...
}

否则,只需将指示器作为背景放在中心位置即可.

Answer 2

在伪元素的css中使用flex非常简单:

.parent::after {
  content: "Pseudo child text";
  position: absolute;
  top: 0;
  right: 0;
  width: 30%;
  height: 100%;
  border: 1px solid red;
  display:flex;
  flex-direction:row;
  align-items: center;
  justify-content: center;
}

请参阅https://jsfiddle.net/w408o7cq/

Answer 3

使用弹性框，您应该先在父级中设置固定的宽度和高度，然后

div::after {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

Answer 4

我知道我参加聚会迟到了，但是这个简单的灵活解决方案对我来说就像一个魅力，以防它对你们中的任何人有所帮助。

.main-div {
    display: flex;
    align-items: center;
}

.my-div-name:before, .my-div-name:after {
    /* This content will be vertically centered with the attributes of the main-div */
}