67

我正在尝试实现与这张图片类似的东西：

在此处输入图像描述

我有一个包含在 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/

Edit2：另外，img 是液体/流体，div/img 的高度未知，宽度设置为 800px 和max-width80%。

4

6 回答 6

107

假设您的元素不是 a <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 的 line-height，另一种方法是：

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: ...
}

否则，只需将指示器作为背景放置在中心位置。

于 2013-01-25T14:47:27.527 回答
40

在伪元素的 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/

于 2017-09-12T13:29:34.847 回答
8

使用 flex box，你应该先在父级中设置一个固定的宽度和高度，然后

div::after {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
于 2018-09-25T20:38:40.780 回答
5

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

.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 */
}
于 2018-12-17T12:38:10.313 回答
3

您可以在不借助图像的情况下做到这一点。（有时您不能，例如在 :before 或 :after 中使用字体图标）。

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 中有一个图像，因此使用 display:block 命中该图像（图像不默认为 display:block）

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

于 2016-06-23T19:53:44.027 回答
1

这是一种使用 :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/

于 2013-12-09T17:25:17.550 回答