解决图片居中问题
在网站中有的时候会让一个图片相对它外层的容器进行居中,如图
一般都是用定位解决的,因为即使你做了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>
本文链接:https://xuexb.com/post/158.html
-- EOF --
发表于 2013年05月21日 16:16:10 ,添加在分类 前端技术 下 ,最后修改于 2017年04月19日 01:10:29
提醒: 本文最后更新于 3189 天前,文中所描述的信息可能已发生改变,请谨慎使用。
Comments
注:如果长时间无法加载,请针对 disq.us | disquscdn.com | disqus.com 启用代理。