img在盒中垂直居中的方法，有三个

最新推荐文章于 2023-04-08 22:42:06 发布

mustang(野马）

最新推荐文章于 2023-04-08 22:42:06 发布

阅读量1.7k

点赞数

分类专栏： css样式文章标签： img3像素源集科技 img居中方法

本文链接：https://blog.csdn.net/weixin_45000381/article/details/89893516

版权

css样式专栏收录该内容

13 篇文章 0 订阅

订阅专栏

 <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>元素的水平垂直居中</title>
    		<style type="text/css">
    			*{margin:0; padding: 0;}
    			a{text-decoration: none; color: #666;}
    			img{border: none;}
    			dl{
    				width:199px;
    				height: 236px;
    				border:1px solid #000;
    				margin:20px auto;
    			}
    			dt{
    				width:199px;
    				height: 165px;
    				border-bottom: 1px solid #CECECE;
    				background: pink;
    				text-align: center;
    				vertical-align: middle;
    				display:table-cell;
    				/*font-size: 0;*/
    				line-height: 0;
    				}
				/*
		* 缺点：1当子元素的宽度大于父元素的时候，会强制缩小自己的宽度，以适应父元素的尺寸；
		*            2、一旦元素转换为table-cell就不能设置margin属性
				 */
				/*第二种方法*/
	

		.box1{
				width:400px;
				height: 300px;
				border:2px solid #333;
				background: deeppink;
				margin:50px auto;
				text-align: center;
			}
			.box1 img{vertical-align: middle;}
			.box1 span{
				display:inline-block ;
				width:0px;
				height: 100%;
				background: #0f0;
				vertical-align: middle;
				}
				/*第三种方法*/
			

    	.box2{
    					width:200px;
    					height: 300px;
    					margin:20px auto;
    					border:2px solid #333;
    					background: #ff0;
    					text-align: center;
    					line-height: 300px;
    					font-size: 0;
    				}
    				.box2 img{vertical-align: middle;}
    		</style>
    	</head>
    	<body>
    		<div class="box2">
    			<img src="images/pic_03.jpg" alt="" />
    		</div>
    		<!--方法2：利用display:inline-block-->
    		<div class="box1">
    			<img src="images/pic_03.jpg" alt="" /><span></span>
    		</div>
    
    		<!--方法1：利用display:table-cell-->
    		<dl>
    			<dt><img src="images/pic_11.jpg" alt="" /></dt>
    			<dd>
    				<a href="#">跑步机</a>
    				<span>¥859000</span>
    			</dd>
    		</dl>
    		
    		
    	</body>
    </html>

浏览器中显示效果如下

mustang(野马）

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
img在盒中垂直居中的方法，有三个

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>元素的水平垂直居中</title> <style type="text/css"> *{margin:0; padding: ...
复制链接

扫一扫