图片水平垂直居中的几种方法总结

1、固定图片大小水平垂直居中,图片300*200 如下:

html代码

	<div class="con">
		<img src="images/fengche.png" alt="">
	</div>

css代码

		.con{
			width: 40%;
			height: 300px;
			margin:50px auto;
			border: 1px solid red;
			/*子元素是行内块时候 可以通过text-align center 设置水平居中*/
			text-align: center;

		}

		img{
			width: 200px;
			height: 200px;
			/*img不支持行高,不能像文本那样设置行高等于盒子高度,垂直居中*/
			line-height: 300px;
			/*margin:100px auto;*/
		}

效果如下

发现水平方向可以通过text-align center 设置水平居中,但是垂直方法无法居中,怎么办呢。img 属于行内块元素,支持所有元素,利用margin-top让它垂直居中。

		.con{
			width: 40%;
			height: 300px;
			margin:50px auto;
			border: 1px solid red;
			/*子元素是行内块时候 可以通过text-align center 设置水平居中*/
			text-align: center;

		}

		img{
			width: 200px;
			height: 200px;
			/*img不支持行高,不能像文本那样设置行高等于盒子高度,垂直居中*/
			line-height: 400px;
			/*margin:100px auto;*/
			margin-top: 50px;
		}

水平方向能不能也靠margin auto实现呢?

		.con{
			width: 40%;
			height: 300px;
			margin:50px auto;
			border: 1px solid red;
			/*子元素是行内块时候 可以通过text-align center 设置水平居中*/
			/*text-align: center;*/

		}

		img{
			width: 200px;
			height: 200px;
			/*img不支持行高,不能像文本那样设置行高等于盒子高度,垂直居中*/
			/*line-height: 300px;*/
			margin:50px auto;
			/*margin-top: 50px;*/
		}

这个时候发现垂直居中了 但是水平没有居中。。。原因暂时想不出来。。。

总结:这种方法比较初级,前提是图片固定大小,根据盒子大小和图片大小计算出margin-top,从而让图片垂直居中。如果不需要水平居中则去掉外部盒子的 text-align: center;

2、利用display:table-cell

html代码同上

css代码

.con{
	   	width: 40%;
	   	height: 300px;
	   	/*margin不生效*/
	   	margin:50px auto;
	    border: 1px solid #ddd;
	    /*转换表格属性*/
	   	display: table-cell;
	   	/*垂直方向居中*/
	   	vertical-align: middle;
	   	 /*水平方向居中*/
	   	text-align: center;
	   }

		img{
			width: 200px;
			height: 200px;

		}}

 

效果如下:

总结:这个方法主要是利用了表格属性,用table-cell搭配vertical-align可以十分简单地完成元素垂直居中。但是margin不生效了。。。

3、利用背景实现居中

html代码

<div class="con"></div>  

css

       .con{
       	width: 400px;
       	height: 300px;
         border: 1px solid #ddd;
         background:url(images/dog.jpg) center center no-repeat;
       }

效果一样

总结:图片固定不变的地方可以使用。

4、利用定位

<div class="con">
      <img src="images/dog.jpg">
</div>  

css

.con{
	   	width: 40%;
	   	height: 300px;
	   	/*margin不生效*/
	   	margin:50px auto;
	    border: 1px solid #ddd;
		position: relative;
	   }

		img{
			position: absolute;
			width: 200px;
			height: 200px;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin:auto;//很关键
		}

其他的方法还有很多,关键是找到适合的方法。

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值