css中怎么让小图标居中

html-css024

css中怎么让小图标居中,第1张

假设小图标命名:icon.png;尺寸为16*16

那可以有几种方式解决居中(左右与上下居中):

1、<div style="text-align:centerwidth:100pxheight:36px">

<img src="images/icon.png" width="16" height="16" style="margin-top:10px" />

</div>

2、<table border="0" cellpadding="0" cellspacing="0">

<tr>

<td style="text-align:centerwidth:100pxheight:36px"><img src="images/icon.png" width="16" height="16" /></td>

</tr>

</table>

提示:td内部默认是垂直居中的

3、<div style="background:url(images/icon.png) center center no-repeatwidth:100pxheight:36px"></div>

background-position:center center重新写入这句话。。因为你使用了background-size裁切了背景图的大小,得用position来设定居中~~~

测试:

初始。。。不加position

加了定位后,居中了