时间戳

首页 > 解决方案 > 在 Div 中的伪元素中居中内容图像

css - 在 Div 中的伪元素中居中内容图像

问题描述

我在 :before 元素中有一个图像，并且内容图像不会居中。

我试着做

width: 314px;
height: 176px;
display: inline-block;
text-align: center;
margin-left: 50%;
transform: translate(-50%, 0);

但是此代码并未集中在所有设备上...

CSS

.bold_option_dropdown:before {
    content: url(https://cdn.shopify.com/s/files/1/1595/2013/files/ENVISIONLEGGINGS-optii.png?3273);
    display:block;
    text-align: center;
    width: 406px;
  }

图像只是以它的父 div 为中心...不居中图像

标签： css

解决方案

您可以在伪元素中添加图像作为背景

.bold_option_dropdown:before {
    background: center center no-repeat;
    background-size: contain;
    background-image: url(https://cdn.shopify.com/s/files/1/1595/2013/files/ENVISIONLEGGINGS-optii.png?3273);
    display:block;
    width: 406px;
    height: 406px;
}

推荐阅读