设置图片在div中居中的方法

最新推荐文章于 2024-06-04 15:43:57 发布

happyyyhy

最新推荐文章于 2024-06-04 15:43:57 发布

阅读量4.9k

点赞数 2

分类专栏： HTML / CSS

本文链接：https://blog.csdn.net/happyYYhy/article/details/60133812

版权

HTML / CSS 专栏收录该内容

32 篇文章 1 订阅

订阅专栏

水平居中的办法：

1、img为内联元素，将img设置为block块元素，并设定其宽度和高度，然后margin：0 auto，图片在其父元素中将会水平居中；

2、直接在img所在的父元素中设置text-align：center，那么该img将会在它的父元素中处于水平居中位置；

竖直居中的办法：

1、在img标签前增加一个span元素，设置其为inline-block，高度和其父元素一致100%，设置vertical-align：middle，同时再设置img元素属性vertical-align：middle，就能实现图像居中显示了。

代码为：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .main{width:600px;height:600px;background:#f00;text-align: center;}
    .main span{ height:100%; display:inline-block; vertical-align:middle;  }
    .main img{width:340px;vertical-align: middle;}
    </style>
</head>
<body>
    <div class="main">
        <span></span>
        <img src="http://i5.akjunshi.com/20160517/146345647387181.jpg">
    </div>
</body>
</html>