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

来源：互联网发布：儿童服饰品牌知乎编辑：程序博客网时间：2024/06/06 05:19

水平居中的办法：

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>

2、图片能写到背景的话尽量写到背景里面，位置属性更容易控制一些。也能实现同样的效果。

0 0