在我的无序列表中,我为项目符号使用了一个图像,但项目符号看起来与它右侧的文本底部对齐。我想让它位于文本高度的中间。css中是否有某种方法可以使子弹居中或添加偏移量?
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
ul
{
list-style-image: url('/images/bullet_blue_8x8.png');
}
在我的无序列表中,我为项目符号使用了一个图像,但项目符号看起来与它右侧的文本底部对齐。我想让它位于文本高度的中间。css中是否有某种方法可以使子弹居中或添加偏移量?
<ul>
<li>item 1</li>
<li>item 2</li>
</ul>
ul
{
list-style-image: url('/images/bullet_blue_8x8.png');
}
list-style-image
您可以使用属性来使用background-image
和定位子弹,而不是使用background-position
。
或者如果你愿意,你也可以使用:before
伪
ul li {
background-image: url(http://www.tandf.co.uk/journals/society/images/icon_pdf.gif);
background-repeat: no-repeat;
padding-left: 20px;
margin-bottom: 10px;
background-position: 0 1px; /* X = 0 and Y = 1px */
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
background: url("/images/bullet_blue_8x8.png") no-repeat 0 -2px;
padding-left: 18px;
font-size: 12px;
}
你需要使用background-image
.