在网站中有的时候会让一个图片相对它外层的容器进行居中,如图

一般都是用定位解决的,因为即使你做了text-align:center;也不行,图是不会居中的.今天上午无意上网发现了一个前端的技巧.用button完美解决这个问题.下面看代码:

<style type="text/css">
 button { 
 height:200px;
 width:300px;
 background: none;
 border: 1px solid #ccc; 
 }
</style>
<button><img src="http://www.baidu.com/img/shouye_b5486898c692066bd2cbaeda86d74448.gif" /></button>

这样就解决了这个问题,但要加连接的话,得加到标签外面,但是会出现问题...

button居中带来的问题

经测试发现,IE8及以下会不认这个连接.也就是说点击不管用.试了很多,也只有用js代码完成了.代码如:

<a onclick="location.href='http://www.xuexb.com'" href="http://www.xuexb.com/">
 <button>
 <img src="http://www.baidu.com/img/shouye_b5486898c692066bd2cbaeda86d74448.gif" />
 </button>
</a>

发表于 2013年05月21日 16:16:10 ,添加在分类 前端技术 下 ,最后修改于 2017年04月19日 01:10:29