web页面开发过程中让图片垂直居中的三种方法

最新推荐文章于 2024-04-25 13:27:51 发布

水中残月

最新推荐文章于 2024-04-25 13:27:51 发布

阅读量1.2w

点赞数

文章标签： CSS html

本文链接：https://blog.csdn.net/sonnylight/article/details/51919780

版权

<pre name="code" class="html"><!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>图片居中</title>
	<style>
     *{
     	padding:0;
     	margin:0;
     }
     /*方法一*/
/*     .view{
     	width: 600px;
     	height: 600px;
     	border:1px solid red;
     	text-align: center;
     	display: table-cell;
     	vertical-align: middle;	
     }*/

     /*方法二*/
/*     .view{
     	width: 600px;
     	height: 600px;
     	border:1px solid red;
     	text-align: center;
     }
     .view img{
     	vertical-align: middle;
     }
     .view span{
     	height: 100%;
     	width:0;
     	display: inline-block;
     	vertical-align: middle;
     }*/

     /*方法三*/
     .view{
     	width: 600px;
     	height: 600px;
     	border:1px solid red;
     	background: url(images/1.jpg) no-repeat;
     	background-position: 50% 50%;
     }
	</style>
</head>
<body>
	<!--
	图片大小为400*300
     方法一:在view中加display:table-cell;vertical-align:middle样式;
     方法二:在img标签后加span标签,并给它如上所示的样式，img还须加vertical-align;middle样式;
     决定行高的是行内最高的元素的值:span的height:100%;
     方法三:背景法,就是让图片当做div背景，然后再调整背景的位置使之在中间位置
    -->
<!-- 	<div class="view">
		<img src="images/1.jpg" alt="">
	</div>
	<div class="view">
		<img src="images/1.jpg" alt=""><span></span>
	</div> -->
	<div class="view">
		
	</div>
</body>
</html>

水中残月

关注

0
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
web页面开发过程中让图片垂直居中的三种方法

图片居中 *{ padding:0; margin:0; } /*方法一*//* .view{ width: 600px; height: 600px; border:1px solid red; text-align: center; display: table-ce
复制链接

扫一扫