css让图片居中显示

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

clhll123

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

阅读量1.1w

点赞数 2

分类专栏： CSS3 文章标签：图片水平垂直居中

本文链接：https://blog.csdn.net/clhll123/article/details/81632975

版权

CSS3 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

为了让网页更美观，图片要在div框内居中显示，且按原来比例。

方案一：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box{
				max-width: 200px;
				height: 200px;
				line-height: 200px;
				text-align: center;
				border: 1px solid black;
			}
			.img{
				max-height: 100%;
				max-width: 100%;
				vertical-align: middle;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<img src="face.jpg" class="img"/>
		</div>
	</body>
</html>

方案一中图片长的话，图片会有一点下移，不知是什么原因

方案二：

用背景图片的方式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.box{
				max-width: 200px;
				height: 200px;
				line-height: 200px;
				text-align: center;
				border: 1px solid black;
				background: url(hua.jpg) no-repeat;
				background-size: contain;
				background-position: center;
			}
		</style>
	</head>
	<body>
		<div class="box">
		</div>
	</body>
</html>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

clhll123

关注关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
css让图片居中显示

为了让网页更美观，图片要在div框内居中显示，且按原来比例。方案一：&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style&gt; .box{ max-width: 2
复制链接

扫一扫