将伪元素与右侧和垂直中心对齐

Question

我需要将图像显示在最右边，并将文字保留在左侧。我还需要保持垂直对齐。

我试图在::after伪元素上浮动，但它会破坏垂直对齐。有什么想法吗？

JSFiddle

＆＃13;

＆＃13;

.holder{
    width: 100%;
    background: tomato;
    height: 200px;
    line-height: 200px;
}

.holder::after{
    content: "";
    border: 1px solid red;
    background: transparent url('my-img.jpg') no-repeat;
    width: 30px;
    height: 30px;
    display: inline-block;
}

＆＃13;

<div class="holder">
    Section 1
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

1. 在.holder元素上，将其设置为position: relative，以便可以相对于自身定位任何子元素或伪元素。
2. 在伪元素上设置position: absolute。这样您就可以将其精确定位在.holder。
中
3. 将right: 0添加到伪元素，以便它转移到.holder的右边缘。
4. 要将伪元素垂直居中，我们设置属性top: 50%。这将它向下移动.holder。此时的问题是它仍然没有居中，因为伪元素的上边缘位于中心。所以我们需要将伪元素向上移动一半自己的高度。我们可以采用以下两种方式之一：

方法一：负边距

因为我们知道伪元素（30px）的高度，所以我们可以像这样设置-15px的上边距：margin-top: -15px;。

以下是一个例子：

＆＃13;
＆＃13;
.holder{
    width: 100%;
    background: tomato;
    height: 180px;
    line-height: 180px;
    position: relative;
}

.holder::after{
    content: "";
    background: blue;
    width:30px;
    height: 30px;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -15px;
}
＆＃13;
<div class="holder">
    Section 1
</div>
＆＃13;
＆＃13;
＆＃13;

方法二：翻译

如果我们不知道元素的高度，我们可以使用transform属性的translate值将伪元素向上移动高度的50％，如下所示：transform: translateY(-50%);（你可能需要提供浏览器前缀以使其在所有浏览器中都能正常工作。）

以下是一个例子：

＆＃13;
＆＃13;
.holder{
    width: 100%;
    background: tomato;
    height: 180px;
    line-height: 180px;
    position: relative;
}

.holder::after{
    content: "";
    background: blue;
    width:30px;
    height: 30px;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}
＆＃13;
<div class="holder">
    Section 1
</div>
＆＃13;
＆＃13;
＆＃13;

Answer 2

您可以在::after元素上使用绝对定位，这样可以控制其位置，而不会影响其他元素的流动。

要相对于容器设置它，您需要首先提供position: relative：

.holder {
    position: relative;
}

然后将图像中心定位到右侧。 top属性将图像的顶部设置在容器的中间位置。要将其拉回一点，以便将transform: translateY(-50%)添加到正确的中心位置：

.holder::after {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

jsFiddle：https://jsfiddle.net/3h71kzxe/4/

Answer 3

以下是小提琴： https://jsfiddle.net/3h71kzxe/5/

.holder{
    width: 100%;
    background: tomato;
    height: 200px;
    line-height: 200px;
    position:relative; /* Added property */
}

.holder::after{
    content: "";
    border: 1px solid red;
    background: transparent url('my-img.jpg') no-repeat;
    width:30px;
    height: 30px;
    display: block;
    position:absolute; /* Added property */
    right:0; /* Added property */
    top:0; /* Added property */
    bottom:0; /* Added property */
    margin: auto 0; /* Added property */
}

<强>解释

要转移：在极右右边的元素之后：添加0但在此之前我们需要将其位置设置为绝对位置，父位置需要相对于使绝对位置相对于其父级框的工作。

top:0, bottom:0 and margin:0 auto;是使它垂直居中，顶部：0和底部：0将拉伸：after元素使其高度为100％但是因为我们给出了高度30px;和保证金：0自动;它会将：after元素放在垂直中心。

Answer 4

FLEX（柔性盒布局模块）

在 2020 中实现此目标的简单方法是使用flex。

.holder {
  display: flex;
  height: 200px;
  width: 100%;
  background: tomato;
  align-items: center;
  justify-content: space-between;
}

.holder::after {
  content: "";
  border: 1px solid red;
  background: url('https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=f13ebeedfa9e') no-repeat;
  width: 30px;
  height: 30px;
}

<div class="holder">
  Section 1
</div>