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

9 浏览
0 Comments

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

我试图实现与这张图片类似的效果：

enter image description here

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

到目前为止，我有以下代码：

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/

编辑2： 另外，img是液体/流体的，div/img的高度未知，宽度设置为800px，max-width设置为80%。

0

3 答案

0 Comments

问题的出现原因：在使用伪元素的:before和:after时，垂直居中内容可能会出现问题。

解决方法：使用flexbox布局，在父元素中设置固定的宽度和高度，并在伪元素中使用display:flex、align-items:center和justify-content:center属性来实现垂直居中。

使用伪元素的:before和:after时，我们经常会遇到需要垂直居中内容的情况。但是，有时候我们会发现内容并没有居中，这是为什么呢？

问题的出现原因是我们没有正确设置相关的样式。在解决这个问题之前，我们首先需要了解一些基本的概念。

在CSS中，伪元素是指通过:before和:after选择器来创建的元素。它们可以用来在页面中添加额外的内容或样式，通常被用于美化页面或实现一些特殊效果。

然而，在使用伪元素时，垂直居中内容可能会成为一个挑战。为了解决这个问题，我们可以使用flexbox布局。

具体的解决方法如下：

首先，在父元素中设置一个固定的宽度和高度。这个宽度和高度可以根据实际情况进行调整，以适应我们的需求。

然后，在伪元素的样式中，使用display:flex、align-items:center和justify-content:center属性来实现垂直居中。其中，display:flex用于将伪元素的子元素设置为弹性布局，align-items:center用于在交叉轴上居中内容，justify-content:center用于在主轴上居中内容。

下面是一个示例代码：

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

这段代码非常简洁明了。通过设置父元素的固定宽度和高度，并在伪元素的样式中使用flexbox布局，我们可以轻松实现垂直居中内容的效果。

需要注意的是，在某些情况下，我们可能并不需要设置height:100%。具体是否需要设置这个属性，可以根据实际情况进行调整。

总结起来，通过使用flexbox布局和一些简单的样式设置，我们可以轻松地实现在伪元素中垂直居中内容的效果。这种方法简单、直观，并且可以适用于各种情况。希望这篇文章能够帮助你解决在使用伪元素时遇到的垂直居中问题。

0
0 Comments

问题的出现原因是在伪元素的CSS中，内容居中时遇到困难。解决方法是使用flexbox布局，在伪元素的CSS中添加以下代码：

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

此代码将在伪元素中应用flexbox布局来实现内容的垂直居中。可以在以下链接中查看具体示例：

[https://jsfiddle.net/w408o7cq/](https://jsfiddle.net/w408o7cq/)

这个解决方法是使用flexbox布局，如果flexbox是可用的选项，那么这应该是被接受的答案。这种方法会导致伪元素的内容重叠在父元素上。对于提问者的图片来说，重叠在父元素上是理想的效果。对于某些场景，其他答案可能不起作用，而这个方法确实帮助了我。

0
0 Comments

问题的原因是需要在伪元素的内容中实现垂直居中。第一种解决方法是将伪元素的高度和行高设为相同，并将其显示方式设置为内联块元素，并使用垂直对齐属性将其垂直居中。第二种解决方法是将伪元素的定位设置为绝对定位，并使用变换属性将其垂直居中。

第一种解决方法在无法更改div的行高时不适用。第二种解决方法在不想将整个伪元素垂直居中时不适用。

除了这两种方法外，还可以将指示器作为背景放置在中心位置。

原文中提到的解决方法一不可行是因为div的高度是未知的，解决方法二也不可行是因为我只想将伪元素的内容垂直居中，而不是整个伪元素。

原文中的控制符号">>"和"<<"是文本还是两个图像？我现在只是使用虚拟的lorem ipsum文本，但我想我会考虑使用CSS或图标字体来生成这些符号。几乎可以肯定，我不会使用图像。

如果使用图像作为背景，只需将背景位置设置为中心即可。

嗯，有趣，我会在几个小时后尝试一下，然后再告诉你结果。

0