css - 的图片大于 16*16 时，如何将 的图片与其文字对齐？

Question

这是我的 <li> 代码风格。

li{
	font-family: Arial, sans-serif;
	font-size: 100%;
	color: black;
	display : list-item;
	list-style-image : url('img/bulletpoint_resoltion_32px.png'); //
}

<ul>
  <li>First text</li>
  <li>Seond text</li>
</ul>

谁知道怎么把图片和文字排成里？ (而不是这些点，这些点被替换为与文本不对齐的图像

Answer 1

将您的列表项包裹在 span 标签中，然后为该标签使用样式 vertical-align: 'n' px;。

例如如果您的“子弹图像”的大小为 64*64px，则 n 的值将为 24(如果字体大小为 100%

即 (64(image height) - 16(font-size))/2 )。那里有一点数学。

HTML:

<ul>
   <li><span>First text</span></li>
   <li><span>Seond text</span></li>
</ul>

CSS:

li{
    font-family: Arial, sans-serif;
    font-size: 100%;
    color: black;
    display : list-item;
    list-style-image : url('http://freedomdefined.org/upload/thumb/5/5c/Fd_sq_icon_sc.svg/64px-Fd_sq_icon_sc.svg.png');
}
span{
    vertical-align: 24px;
}

DEMO .