Question

我正在努力实现与此图片类似的东西：

enter image description here

我有一个包含在div中的图像（作为幻灯片的一部分），并且使用：before和：after伪元素，我显示两个控件移动到下一个（＆gt;＆gt;）或上一个（＆lt; ＆lt;）幻灯片的图像。

到目前为止，我有这个：

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％。

Answer 1

假设你的元素不是<img>（因为自闭元素不允许伪元素），我们假设它是<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 {
   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 点击该图像（图像不要默认显示：block）

这是您特定案例的更新小提琴。 http://jsfiddle.net/rdy4u/56/

Answer 4

以下是使用：before和：after伪元素创建下一个和上一个控件的方法。与边界技巧一起为前一个/下一个按钮创建三角形。它没有给你一个100％高度的区域来点击，但是如果你让三角形（箭头）足够大，它应该弥补它。

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/

Answer 5

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

on

Answer 6

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

.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 */
}

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

6 个答案: