css让图片居中显示
程序员文章站
2022-04-24 20:58:04
...
为了让网页更美观，图片要在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>
上一篇： 【css】让img图片居中显示