top
元旦节到了,元旦节快乐...

固定当前背景  反馈、咨询、建议、留言等,请点这里[Alt+G]

本栏相关
其他文章
DIV+CSSdiv+css当前位置:首页 >>开发技巧>>DIV+CSS
让图片完全居中的方法
编辑admin 发布时间2014-08-26 浏览量3641 来源本站 特大
摘要:让图片完全居中的方法。

1、加上任何一个元素a

<div class="test_box">
<span class="hook">a</span>
<a href="#" target="_blank"><img src='11/1-10102Q94521.jpg' alt="" /></a>
</div>
<style>
.test_box {width:600px;height:600px;overflow:hidden;text-align:center; line-height:600px; vertical-align:middle;font-size:0;border:1px solid #000000; position:fixed; top:0px; left:0px;}
.test_box img {vertical-align:middle;border:0 none;}
</style>
2、让一个元素撑高hook
<div class="test_box">
<span class="hook"></span>
<a href="#" target="_blank"><img src='11/1-10102Q94521.jpg' alt="" /></a>
</div>
<style>
.test_box {width:600px;height:600px;overflow:hidden;text-align:center;font-size:0;border:1px solid #000000; position:fixed; top:0px; left:0px;}
.test_box .hook {display:inline-block;width:0;height:100%;overflow:hidden;margin-left:-1px;font-size:0;line-height:0;vertical-align:middle;}
.test_box img {vertical-align:middle;border:0 none;}
</style>

3、不使用相对的话,则把div的diaplay:table-cell 图片与上相同

4、图片使用vertical-align:top

标签  技巧网页制作

按键盘左右方向键可快速浏览上一篇(←)、下一篇(→)


反馈/咨询/建议/留言(GuestBook)
您好,怎么称呼您!
您的姓名:
上一步:鼠标向上滚动/左方向键(←)
下一步或完成:鼠标向下滚动/Tab键/右方向键(→)
如果您有空的话,可以填一下您的相关信息!
您的电话:
您的邮箱:
现在,请填写您想要了解的信息!
信息内容:
验证码: 看不清?点图片刷新