所以最近我试图创建一个列表样式的图像代码，它工作，但图像是在最左边。有什么能帮我的吗?还是画面太大了?
<html>
<head>
<style>
ul {
list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAb1BMVEX///8yMjIuLi5KSkrk5OQlJSUWFhaYmJg3Nzfv7+8TExONjY1SUlI+Pj719fUcHBwjIyMbGxuEhISmpqbIyMiwsLDPz89qamp0dHRXV1fCwsK4uLhDQ0Pq6urX19cqKip/f38LCwteXl6VlZUDAwM4MtltAAAEKElEQVR4nO3d6ZKiMBQFYEBBBSUBccGFRfv9n3FGArbOKAkkBoTz/WpbinAaJLnXKtowAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOCrHON5n8VH2YDr3DL7zMrXkgnzriNwuXIBp27XAbjcqVxCp+sAXI6ahFYfqUy4WvbRSl1Ceya1k0+Z2UgoAAk7hYRCkLDiJ1FylhqpBY0J10viEMedh3KDNaUtYWQRtrywbDeUGq0hXQln7kN9RZe+1HiNaEq4zp/WwelJarxG9CTcPgf8u+1easAm9CRclZdoSmn5k7uVGrEBLQkPrPaw0vC4XlL2cyw1YgNaEu7TItRpcXtxJaycWfy+73sTCV79bUtLQnaRknKy3xV5SfT7/pzKlLh0XhtRR0K/OGvWrnwZFS/p5v7+hphSyOb1uBoTFo0q23vamv729zxbLuF9z90lLMYY8jl8+TkMFH4Oaw9OS8Ls1b304fbghzL30rAH99JX8+FFasQG9KxpTv+vaRKpERvQtC79t+0/uHXp8GuLEdSHI6jxjapP4wy2T3PjT4fda+sIEgpBwk6hqy8EXf2bwc/4g1+1DX7lPfzqafAV8PC7GNxO1CC7+iq7id139QffEUZX//vPIbr66OrLwZpGCNalI6gtRlAfjqDGN9DV/xj0S4UgYaeQUAi6+gy6+h+CVZsQrLxHUD0NvgIefhcDXX109Tm67wijq//95xBdfXT15WBNIwTr0hHUFiOoD0dQ4xvo6n8M+qVCkLBTSCjk/AUJF/wtn/jh6hGbyOerdia1FWzJm7Tc+5wd3NPvOK2dm9NTRVetVdpWeIT/kIyYtN35q4Oj3FXjJjCVCmqr9C4GlO2s/OfxKRkvRIoDclo7RvXpVcnZb8/+a+ftXvnTQ7l3xTUr1JU8zrMcMyXuOyQ1VQ9HeU/dPbBeyySWf/hm3OAvr2K4SbEncuAkTNgEeOVsJiTJBfPlShof7BbicPdVfPKt+jaeqO39KqyTEjWdHTY9Eu52l+J6dtQ8zuocO7yHZVtO3HRR8tq2uPoEOn0bKrihmOiSE/s9kl/qZxNx7NRQ3nRoGAs2QTmqBjYWh9n1ndlBzfkz7p3bQKBPxNrYZqqxpaQA+wbFTDOBbafsDphqe+yaEjE7L7lQKZWxP4e942/aG7vymDOhrcsTbtL4Wy5UPy4PWfSjFeXl9qay281HRVY57ebCx+tVX2y6O22PeWxte6m+OglE6u3SvoqYOqvwmJwX/XROjuEqqNZNpNF3QveIpmWTwHlbHHTLCYh9XzMFDb/08vr/jy2euQ0uUeYQKK+FP8gOWtwU/cwVqQz6IHWzdhPbNPuhvNKgexb9ydo3hf3NhTp1tUHXiEMvG8mFiZ8cZ1evn66zY/It6y4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAKP0BTE6VU67g/gwAAAAASUVORK5CYII=") ;
}
ul.a {
list-style-position: outside;
}
ul.b {
list-style-position: inside;
}
ol { list-style-image: url('https://i.redd.it/0839542hglz71.jpg') 7px 7px ;
}
</style>
</head>
<body>
<h1> <center> List style image property </center> </h1>
<ul>
<center> <li> one </li> </center>
<center> <li> two </li> </center>
<center> <li> three </li> </center>
</ul>
<ol>
<center> <li> one </li> </center>
<center> <li> two </li> </center>
<center> <li> three </li> </center>
</ol>
</body>
<html>
你可以简化你的代码，而不是在标记图像上使用pseudo elements，参见代码片段，更多详细信息请参阅代码中的注释:
ul, ol {
list-style: none; /* remove default markers */
padding-left: 0; /* remove default left padding (old place of markers) */
}
ul li,
ol li {
display: flex; /* make li element flex */
align-items: center; /* center content */
gap: 1rem; /* gap between marker and content */
}
ul li:before,
ol li:before {
content: '';
width: 2rem; /* width of marker */
aspect-ratio: 1/1; /* make it square (or any other aspect ratio) */
background-size: contain; /* scale background image */
background-position: center; /* center background image */
background-repeat: no-repeat;
}
ul li:before {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAOEAAADhCAMAAAAJbSJIAAAAb1BMVEX///8yMjIuLi5KSkrk5OQlJSUWFhaYmJg3Nzfv7+8TExONjY1SUlI+Pj719fUcHBwjIyMbGxuEhISmpqbIyMiwsLDPz89qamp0dHRXV1fCwsK4uLhDQ0Pq6urX19cqKip/f38LCwteXl6VlZUDAwM4MtltAAAEKElEQVR4nO3d6ZKiMBQFYEBBBSUBccGFRfv9n3FGArbOKAkkBoTz/WpbinAaJLnXKtowAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOCrHON5n8VH2YDr3DL7zMrXkgnzriNwuXIBp27XAbjcqVxCp+sAXI6ahFYfqUy4WvbRSl1Ceya1k0+Z2UgoAAk7hYRCkLDiJ1FylhqpBY0J10viEMedh3KDNaUtYWQRtrywbDeUGq0hXQln7kN9RZe+1HiNaEq4zp/WwelJarxG9CTcPgf8u+1easAm9CRclZdoSmn5k7uVGrEBLQkPrPaw0vC4XlL2cyw1YgNaEu7TItRpcXtxJaycWfy+73sTCV79bUtLQnaRknKy3xV5SfT7/pzKlLh0XhtRR0K/OGvWrnwZFS/p5v7+hphSyOb1uBoTFo0q23vamv729zxbLuF9z90lLMYY8jl8+TkMFH4Oaw9OS8Ls1b304fbghzL30rAH99JX8+FFasQG9KxpTv+vaRKpERvQtC79t+0/uHXp8GuLEdSHI6jxjapP4wy2T3PjT4fda+sIEgpBwk6hqy8EXf2bwc/4g1+1DX7lPfzqafAV8PC7GNxO1CC7+iq7id139QffEUZX//vPIbr66OrLwZpGCNalI6gtRlAfjqDGN9DV/xj0S4UgYaeQUAi6+gy6+h+CVZsQrLxHUD0NvgIefhcDXX109Tm67wijq//95xBdfXT15WBNIwTr0hHUFiOoD0dQ4xvo6n8M+qVCkLBTSCjk/AUJF/wtn/jh6hGbyOerdia1FWzJm7Tc+5wd3NPvOK2dm9NTRVetVdpWeIT/kIyYtN35q4Oj3FXjJjCVCmqr9C4GlO2s/OfxKRkvRIoDclo7RvXpVcnZb8/+a+ftXvnTQ7l3xTUr1JU8zrMcMyXuOyQ1VQ9HeU/dPbBeyySWf/hm3OAvr2K4SbEncuAkTNgEeOVsJiTJBfPlShof7BbicPdVfPKt+jaeqO39KqyTEjWdHTY9Eu52l+J6dtQ8zuocO7yHZVtO3HRR8tq2uPoEOn0bKrihmOiSE/s9kl/qZxNx7NRQ3nRoGAs2QTmqBjYWh9n1ndlBzfkz7p3bQKBPxNrYZqqxpaQA+wbFTDOBbafsDphqe+yaEjE7L7lQKZWxP4e942/aG7vymDOhrcsTbtL4Wy5UPy4PWfSjFeXl9qay281HRVY57ebCx+tVX2y6O22PeWxte6m+OglE6u3SvoqYOqvwmJwX/XROjuEqqNZNpNF3QveIpmWTwHlbHHTLCYh9XzMFDb/08vr/jy2euQ0uUeYQKK+FP8gOWtwU/cwVqQz6IHWzdhPbNPuhvNKgexb9ydo3hf3NhTp1tUHXiEMvG8mFiZ8cZ1evn66zY/It6y4AAAAAAAAAAAAAAAAAAAAAAAAAAAAAKP0BTE6VU67g/gwAAAAASUVORK5CYII=");
}
ol li:before {
background-image: url('https://i.redd.it/0839542hglz71.jpg');
}<p>UL list:</p>
<ul>
<li> one </li>
<li> two </li>
<li> three </li>
</ul>
<p>OL list:</p>
<ol>
<li> one </li>
<li> two </li>
<li> three </li>
</ol>