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

Posted 2023-03-05

【中文标题】:before/:after 伪元素的内容垂直居中

【英文标题】：Vertically centering content of :before/:after pseudo-elements

【发布时间】：2013-01-09 13:00:36

【问题描述】：

我正在尝试实现类似于这张图片的效果：

我有一个包含在 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是liquid/fluid，div/img的高度未知，宽度设置为800px，max-width设置为80%。

【问题讨论】：

你确定这是你的代码吗？ （见jsfiddle.net/RLccx）

我认为在空元素（如 img 或 input...）上不允许使用伪元素

IMG 不能有前后，反正他显然用了可能的 div。这只是一个例子。

@dfsq 魔鬼在细节中。尤其是在处理更复杂的布局时，细节很重要。

你说的很对，我很抱歉！我确实将 img 包装在 div 中，并将伪元素应用于 div。我不在家，所以我根据我的记忆写了这个，对不起。

【参考方案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 的 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: ...

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

【讨论】：

第一个解决方案是不可能的，因为 div 的高度是未知的，第二个也是不可能的，因为，正如我所说，我不想让整个伪元素居中（就像你对 top: 50%) 所做的那样，只有它的内容。

@dcastro 你的控件>> 和<< 是文本还是两个图像？

我现在只使用虚拟lorem ipsum，但我想我会使用css或图标字体来生成符号。几乎可以肯定，我不会使用图片。

除非，如果使用图像可以使这种情况成为可能，我想我会考虑一下并改用图像。

使用图像作为背景只需将背景位置设置为中心

【参考方案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/

【讨论】：

打败我。如果 flexbox 是一个选项，这应该是公认的答案。

这将使后内容与父内容重叠。

@robx 与父级重叠实际上是这个想法......（参见 OPs 图片）

完美答案。在我的情况下，其他答案不起作用，这对我很有帮助。

【参考方案3】：

使用弹性盒子，你应该先在父级中设置一个固定的宽度和高度

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

【讨论】：

这是完美的 - 简短而简洁。虽然对我来说 height:100% 不是必需的。

【参考方案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 */

【参考方案5】：

您可以在不借助图像的情况下做到这一点。（有时您不能，例如在 :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/

【参考方案6】：

这是一种创建下一个和上一个控件的方法，使用 :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/