时间戳

首页 > 解决方案 > 如何在 :after 元素中居中内容图像

css - 如何在 :after 元素中居中内容图像

问题描述

我使用带有图像的 :after 元素，效果很好。但我想将 :after 元素（图像）放在页面中心，同时，正常的小元素是左对齐的文本。

该元素是一个显示内联块，但父元素不允许它居中。

CSS

.bold_option_textbox span.bold_help_text:first-of-type>small:after {
    content: url(https://cdn.shopify.com/s/files/1/1595/2013/files/PRINT-YOUR-NAME.png?3077);
    width: 314px; 
    height: 176px;
    display:inline-block;
    text-align:center;
  }

HTML

<span class="bold_help_text">
<small>Text Content</small>
</span>

我希望它居中，但它不能居中，因为它是一个 :after 元素并响应其父元素。bold_help_text 项目位于页面中心。

页面元素的实时预览：https ://wild purpose.com/pages/ambassador-package

标签： css

解决方案

对不起..请尝试显示：块而不是显示：内联块..

CSS

.bold_option_textbox span.bold_help_text:first-of-type>small:after {
  display:block;
}

推荐阅读