您的位置：首页 > 其它

未知宽高图片在容器内水平垂直居中

2013-12-03 09:26 393 查看
一个图片在容器内，水平垂直居中的效果。

效果原理：
利用veryical-align:middle，让img可以位于span的中间对齐。
而左右居中的话，由于img是特殊内嵌元素，所以它是受到text-align:center的控制的。

实现代码如下所示：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片在容器内，水平垂直居中</title>
<style>
.box{width:600px;height:400px;border:1px 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="" alt=""/>
<span></span>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航