昔洛 的个人博客

Bug不空,誓不成佛

目录
图片的几种垂直居中的方式
/      

图片的几种垂直居中的方式

图片居中

有的时候图片需要在盒子里垂直居中,比如导航的 logo,侧边的图片链接等,需要垂直居中。本篇将随时更新图片居中的方法。

居中方法

  • 一、高度=行高法
    大多情况下,行高与高度相等内容居中用于文字,其实这也可以用于图片,不过不推荐,因为 比较特殊,它的对齐方式是默认图片的底线居中,用这个方法的话得设置图片的对齐方式为 vertical-align: middle。但这也是一种方法,示例如下:
<style>
.t1 {

	width: 200px;
	height: 200px;
	line-height: 200px;
	background-color: red;
}
.t1 img {
	vertical-align: middle;
}
</style>
<body>
	<div class="t1">
		<img src="https://jiangck.com/favicon.ico">
	</div>
</body>
  • 二、内外边距法
    利用 UI 给好的图可以直接使用利用内外边距来这是图片的垂直居中对齐

    • 父元素设置 padding-top 需要重新计算父容器的高度(需要的话)
    • 子元素设置 margin-top
  • 三、position 定位
    定位功能非常强大,可以直接利用子绝父相(子元素绝对定位,父元素相对定位)来设置居中(top),然后将图片反向上移一般的宽度即可实现,示例如下:

<style>
	.t2 {

		width: 150px;
		height: 150px;
		background-color: blue;
		position: relative;
	}
	.t2 img {
		position: absolute;
		top: 50%;
		margin-top: -64px;
	}
</style>
<body>
	<div class="t2">
		<img src="https://jiangck.com/favicon.ico">
	</div>
</body>
没有什么代码的执行速度比空代码更快。
评论
歌名 - 歌手
0:00