Question

Closed. This question needs debugging details. It is not currently accepting answers.

编辑问题，以包括所需的行为、特定问题或错误，以及重现问题所需的最短代码。这将有助于其他人回答这个问题。

Closed 5 days ago.

Improve this question

在此页面上，我使用strong:: before {}伪元素来添加您在一些章节文本之前看到的星形图像，例如：

在此处输入图像描述

不幸的是，正如您所看到的，星形图像有一些奇怪的偏移，它位于文本上方：

在此处输入图像描述

该伪元素的代码是：

body .prime-steps .prime-section .section-content .min-height-section.chapter-formatting h3.c-accordion__title strong::before  {
    content:   ;
    background: url(https://goodowners.dog/wp-content/uploads/2023/12/star_2_yellow_22px.png);
    display:inline-block;
    width: 22px;
    height: 22px;
    position: relative;
    margin-right: 10px;
}

添加vertical-align: middle ；由于某种原因会产生相反的问题，然后星星位于文本下方-多么奇怪！

在图像中添加padding-top和margin-top ，这只会使整个内容向下推。

如果使用Inspector ，可以看到h3父元素具有：

display:flex;
align-items: center;
align-text: center;

如何使伪元素图像与文本垂直对齐？

我可以使用transform: translatey (3px);来解决这个问题，但这似乎并不是正确的方法。

Answer 1

我建议添加以下内容：

strong {
  display: flex;
  align-items: center; /* optional */
}

根据您的首选外观，您可能更喜欢不带对齐项目的结果。

Answer 2

使用:: before和: : after进行定位的最佳实践包括确保父元素始终设置为相对位置，而这些伪元素应设置为绝对位置（不要忘记使用top、left等）。

body .prime-steps .prime-section .section-content .min-height-section.chapter-formatting h3.c-accordion__title strong{
  position: relative;
  padding-left: 30px;
}
body .prime-steps .prime-section .section-content .min-height-section.chapter-formatting h3.c-accordion__title strong::before {
    content:   ;
    background: url(https://goodowners.dog/wp-content/uploads/2023/12/star_2_yellow_22px.png);
    display: inline-block;
    width: 22px;
    height: 22px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

通过这种方式，您的伪元素将始终停留在您想要的位置，而不会干扰布局。

友情链接