未知宽高img的居中问题

最新推荐文章于 2023-03-24 10:34:24 发布

weixin_37460170

最新推荐文章于 2023-03-24 10:34:24 发布

阅读量197

点赞数

分类专栏： ‘美人在骨不在皮’---实现原理

本文链接：https://blog.csdn.net/weixin_37460170/article/details/77934256

版权

‘美人在骨不在皮’---实现原理专栏收录该内容

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style>
.box{ width:800px;height:600px;border:2px solid #000; text-align:center;}
span{ display:inline-block; height:100%; vertical-align:middle;}
img{ vertical-align:middle;}
</style>
</head>
<body>
<div class="box">
	<img src="bigptr.jpg" /><span></span>
</div>
</body>
</html>

兼容ie6,7和标准版本

第二种方法，display:table-cell+text-align：center+vertical-align：top+css hack兼容ie6,7

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style>
.box{ width:800px; height:600px; border:2px solid #000; display:table; position:relative; overflow:hidden;}
span{ display:table-cell; text-align:center; vertical-align:middle; *position:absolute; left:50%; top:50%;}
img{ *position:relative; vertical-align:top; left:-50%; top:-50%;}
</style>
</head>
<body>
<div class="box">
	<span><img src="bigptr.jpg" /></span>
</div>
</body>
</html>

weixin_37460170

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
未知宽高img的居中问题

.box{ width:800px;height:600px;border:2px solid #000; text-align:center;}span{ display:inline-block; height:100%; vertical-align:middle;}img{ vertical-align:middle;} 兼容ie6,7和标准版本第二种方法，
复制链接

扫一扫

专栏目录