开发者

Centering images in menu?

开发者 https://www.devze.com 2023-02-05 01:33 出处:网络
I have a list of links such as: <li><a href=\"#\"><img src=\"icon.png\" /> Text</a></li>

I have a list of links such as:

<li><a href="#"><img src="icon.png" /> Text</a></li>

The point is icons just like the text next to them are at the same level and I want them to be a little below, so it will look like they're centered.

I know it's hard to get, so check the link below.

There's a live demo (two images bel开发者_如何学编程ow, the first one shows how it looks now and the second one how I want it to look):

http://jsfiddle.net/3yZTg/


Use vertical-align: middle on the images.

li a img
{
    vertical-align: middle;
}


Alternatively, and this behaves more uniformly across browsers, you can make it a bg:

<li><a href="#"><span style="padding-left: 12px; display: block; background: transparent url(icon.png) left center no-repeat; float: left;">Text</span></a></li>
0

精彩评论

暂无评论...
验证码 换一张
取 消