如何使div中图片垂直居中

最新推荐文章于 2023-10-16 17:56:08 发布

日出东方VS唯我不败

最新推荐文章于 2023-10-16 17:56:08 发布

阅读量565

点赞数 1

分类专栏： ◆前端开发 # HTML 文章标签：如何使div中图片垂直居中

◆前端开发同时被 2 个专栏收录

59 篇文章 0 订阅

订阅专栏

HTML

19 篇文章 0 订阅

订阅专栏

关于图片垂直居中的话题想必大家在论坛或者是百度搜索列表中看到了不少了吧，烦人的是没有具体或者相当详细的解决方法，希望本文所整理的知识点可以帮助到你

div相对与table对于图片的垂直居中支持的并不好,特别对于不同浏览器的兼容性来说,这里我们看下一个简洁的css解决方法:
在曾经的淘宝UED 招聘中有这样一道题目：

“使用纯CSS实现未知尺寸的图片(但高宽都小于500px)在500px的正方形容器中水平和垂直居中。”

当然出题并不是随意，而是有其现实的原因，垂直居中是淘宝工作中最常遇到的一个问题，很有代表性。
题目的难点在于两点：
1.垂直居中；
2.图片是个置换元素，有些特殊的特性。
至于如何解决，下面是一个权衡的相对结构干净，CSS简单的解决方法：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title> new document </title>
		<meta name="generator" content="editplus" />
		<meta name="author" content="" />
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<style type="text/css">
			.box { 
				/*非IE的主流浏览器识别的垂直居中的方法*/ 
				display: table-cell; 
				vertical-align:middle; 
				/*设置水平居中*/ 
				text-align:center; 
				width:500px; 
				height:500px; 
				border: 1px solid green; 
			} 
			.box img { 
				/*设置图片垂直居中*/ 
				vertical-align:middle; 
				border: 1px solid red;
			} 
		</style>
	</head>

	<body>
		<div class="box"> 
			<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" /> 
		</div>
	</body>
</html>

效果图如下：

日出东方VS唯我不败

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
如何使div中图片垂直居中

关于图片垂直居中的话题想必大家在论坛或者是百度搜索列表中看到了不少了吧，烦人的是没有具体或者相当详细的解决方法，希望本文所整理的知识点可以帮助到你div相对与table对于图片的垂直居中支持的并不好,特别对于不同浏览器的兼容性来说,这里我们看下一个简洁的css解决方法: 在曾经的淘宝UED 招聘中有这样一道题目： “使用纯CSS实现未知尺寸的图片(但高宽都小于500px)在50
复制链接

扫一扫

专栏目录