让动态图片垂直居中

最新推荐文章于 2021-06-04 01:42:16 发布

婷酱酱

最新推荐文章于 2021-06-04 01:42:16 发布

阅读量173

点赞数

分类专栏： html/css

本文链接：https://blog.csdn.net/weixin_43221240/article/details/103868290

版权

html/css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

使用display:table-cell布局

html代码：

<div class="tablebox">

<div id="imgbox">

<img src="1.jpg" alt="">

</div>

</div>

CSS代码：

.tablebox{width: 300px;height: 250px;background: #fff;display: table}

#imgbox{display: table-cell;vertical-align: middle;text-align:center;}

#imgbox img{width: 100px}

vertical-align该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式

div.inner{
			height: 300px;
			width: 300px;
			display:table-cell;
			vertical-align: middle;
			border:1px solid #ccc;
			text-align: center;
		}
		img{
		}
	</style>
</head>
<body>
	<div class="outer">
		<div class="inner"><img src="./js原生轮播图/images/img1.jpg" alt="" width="100px" height="100px"></div>
	</div>