关于让图片垂直居中的方法

最新推荐文章于 2023-09-26 19:04:47 发布

goodgo24

最新推荐文章于 2023-09-26 19:04:47 发布

阅读量371

点赞数

有时候元素用了浮动，但是仍想图片垂直居中怎么办呢？

以下有一种方法借助了span元素定位

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图片垂直水平居中</title>
<style>
div{height:500px;width:400px;text-align:center;border:1px solid #000;margin:20px auto;}
img{vertical-align:middle;}  /* 关键代码 */
span{height:100%;display:inline-block;vertical-align:middle;} /* 关键代码 */
</style>
</head>
 
<body>
    <div>
        <img src="http://img.o571.com/fc/ad/20130827161606949.jpg" width="323" height="215" />
        <span></span>
    </div>
</body>
</html>