关于CSS：伪元素：before /：after的垂直居中内容


Vertically centering content of :before/:after pseudo-elements

我正在尝试实现类似于以下图片的功能：

enter image description here

我有一个图像(作为幻灯片的一部分)包装在div中，并带有：before和：after伪元素，我显示了两个控件以移至幻灯片的下一个(>>)或上一个(<<)图像 。

到目前为止，我有这个：

1
2
3
4
5
6
7
8
9
10
11
12
div {
  position: relative;
}

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

但是，我无法将伪元素的内容居中，文本显示如下：

enter image description here

这有可能实现吗？ 如果不是，那么最语义上的解决方法是什么？
我不想将元素本身居中，仅将其内容居中。 我希望将元素拉伸到100％的高度。

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

Edit2：此外，img是液体/流体，div / img的高度未知，并且宽度设置为800px，max-width设置为80％。

相关讨论

假设您的元素不是(因为自闭元素上不允许使用伪元素)，我们假设它是，因此一种方法可能是：

1
2
3
4
5
6
7
8
9
10
11
12
div {
    height: 100px ;
    line-height: 100px;
}
div:before, div:after {
    content:"";
    ...
    display: inline-block;
    vertical-align: middle;
    height: ...;
    line-height: normal;
}

如果您不能更改div的行高，则另一种方法是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
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: ...
}

否则，只需将指示器作为背景置于中心位置即可。

相关讨论

在伪元素的CSS中使用flex相当简单：

1
2
3
4
5
6
7
8
9
10
11
12
13
.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/

相关讨论

您可以执行此操作而无需使用图像。 (有时，例如，不能在：before或：after之后使用字体图标)。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
div {
   position: relative;
   overflow:hidden;
}

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%);

   height:20000px;
   line-height:20000px;

   content:">>";
}

诚然，使用20000px有点厚脸皮。如果您的div会更大，则只需增加px。

在您的情况下，您在div中有一张图片，因此请使用display：block击中该图片(图片默认不显示为display：block)

这是针对您的特定情况的最新小提琴。 http://jsfiddle.net/rdy4u/56/

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

1
2
3
4
5
6
div::after {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
相关讨论

我知道我参加聚会很晚，但是这个简单的伸缩解决方案对我来说就像一个魅力，万一它对您有帮助。

1
2
3
4
5
6
7
8
.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 */
}

这是一种使用：before和：after伪元素创建下一个和上一个控件的方法。与边框技巧一起为上一个/下一个按钮创建三角形。它不会为您提供100％的高度单击区域，但是，如果将三角形(箭头)设置为足够大的尺寸，则可以弥补这一点。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
div {
  position: relative;
  width: 800px;
  max-width: 80%;
  border: 1px solid red;
  text-align: center;
  margin: 0 auto;
}

div:before, div:after {
  opacity: 0.5;
  display:block;
  content:"";
  position:absolute;
  width: 0;
  height: 0;
  }

div:before {
  top: 40%; left: 0;
  border-top: 25px solid transparent;
  border-right: 50px solid blue;
  border-bottom: 25px solid transparent;
}

div:after {
  top: 40%; right: 0;
  border-top: 25px solid transparent;
  border-left: 50px solid blue;
  border-bottom: 25px solid transparent;
}

这是工作代码：http://jsfiddle.net/fiddleriddler/rPPMf/