CSS :before/:after 伪元素的垂直居中内容

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

提问by dcastro

I'm trying to achieve something similar to this picture:

我试图实现类似于这张图片的东西：

I have an image (as part of a slideshow) wrapped in a div, and with :before and :after pseudo-elements, I display two controls to move onto the next (>>) or previous (<<) images of the slideshow.

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

So far, I have this:

到目前为止，我有这个：

div {
  position: relative;
}

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

I can't, however, center the content of the pseudo-elements, the text appears like this:

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

Is this possible to achieve? If not, what would be the most semantic workaround? I do not want to center the element itself, only its content. I'd prefer to have the element stretched to 100% height.

这有可能实现吗？如果没有，最语义化的解决方法是什么？我不想将元素本身居中，只想将其内容居中。我更喜欢将元素拉伸到 100% 的高度。

Edit:http://jsfiddle.net/rdy4u/

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

Edit2:Also, the img is liquid/fluid, the height of the div/img are unknown, and the width is set to 800px and max-widthto 80%.

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

回答by Fabrizio Calderan

Assuming your element is not an <img>(because pseudo elements are not allowed on self-closing elements), let's suppose it's a <div>, so a way could be:

假设您的元素不是 an <img>（因为自闭合元素上不允许使用伪元素），假设它是 a <div>，那么方法可能是：

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

If you cannot change the line-height of the div, another way is:

如果您无法更改 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: ...
}

Otherwise, just place the indicators as a background in center position.

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

回答by david

Using flex in the pseudo element's css it is rather easy:

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

see https://jsfiddle.net/w408o7cq/

见https://jsfiddle.net/w408o7cq/

回答by Alaeddine

Using flex box, you should set a fixed width and height in the parent first then

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

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

回答by galeaspablo

You can do this without resorting to images.(Sometimes you can't, e.g. using font icons inside :before or :after).

您无需借助图像即可做到这一点。（有时你不能，例如在 :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: ">>";
}

Admittedly, it's a bit cheeky to use 20000px If your div will ever be larger than that, just increase the px.

诚然，使用 20000px 有点厚颜无耻

In your case, you have an image inside the div, so hit that image with display:block(images don't default to display:block)

在您的情况下，您在 div 中有一个图像，因此使用 display:block 命中该图像（图像不默认为 display:block）

Here's the updated fiddle for your particular case. http://jsfiddle.net/rdy4u/56/

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

回答by Ken

I know I'm late for the party but this simple flex solution worked like a charm for me in case it helps any of you.

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

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

回答by user3083754

Here is a way of creating next and previous controls, using :before and :after pseudo-elements. Along with border trick to create triangles for previous/next buttons. It does not give you an area 100% of height to click, but if you make the triangle (arrows) a big enough size it should make up for that.

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

Here is the code working: http://jsfiddle.net/fiddleriddler/rPPMf/

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