将列表样式图像与文本按比例对齐 [英] aligning list-style-image proportionally with text

问题描述

所以我有

<ul>
  <li>Hello</li>
</ul>

和

li {
    list-style-image: url(../img/bullet.png); /* 13x13 px */
    /* line-height: 13px; */
    /* vertical-align: middle; */
    padding-left: 5px;
}

看起来像

如您所见，< li> 的文本和图像元素未垂直对齐(图像高于文本)，我尝试对其应用行高和垂直对齐(注释掉了)代码)，但它甚至都没有解决.有没有办法实现良好的对齐?

as you can see text and image element of <li> are not aligned vertically (image is higher than text), I tried applying line-height and vertical-align to it (commented out code), but it didn't even it out. Is there a way to achieve good alignment?

推荐答案

填充将仅影响元素内部的任何内容，在您的情况下为文本.

The padding will affect only whatever is inside the element—the text, in your case.

唯一可用的位置调整属性是 list-style-position ，但唯一允许的值为 inherit ， inside 或 outside .最常见的做法是使用:

The only position adjustment property available is list-style-position, but the only permitted values are inherit, inside or outside. The most common practice is to use:

list-style: none;

，然后将所需的图像用作< li> 的背景

and then apply the desired image as the <li>'s background

li {
    /** the image will be vertically aligned in the center **/
    background: url(../img/bullet.png) left center no-repeat; 

    /** move the text to the right **/
    padding-left: 20px; 
}

这篇关于将列表样式图像与文本按比例对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！