图片在父元素里面水平垂直居中

最新推荐文章于 2023-07-14 09:39:23 发布

weixin_34161083

最新推荐文章于 2023-07-14 09:39:23 发布

阅读量722

点赞数 1

原文链接：http://www.cnblogs.com/MagicZhao123/p/7252692.html

版权

<!DOCTYPE html>

<head>

</head>
<style>
.img_wrap{
width: 500px;
height: 300px;
border: 1px dashed #ccc;
display: table-cell;
vertical-align: middle;
text-align: center;
}

img{

height:auto;

}
</style>
<body>

</html>

第二种》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

<style>

.pic { width: 120px;height: 120px;margin: 40px auto;border: 1px solid #ccc;text-align: center;padding: 5px; }

.pic:before { content: "";display: inline-block;height: 100%;vertical-align: middle;width: 0; }

.pic img { max-width: 120px; max-height: 120px;vertical-align: middle; }

</style>

第三种图片不变形用背景实现

<!DOCTYPE html>

<head>

</head>

<body>

</body>

</html>

<style>

.pic {
height: 300px;
width: 300px;
background-repeat: no-repeat!important;
background-position: center center!important;
background-size: cover!important;
background: url(https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=1438475101,354016904&fm=58);
}

</style>

转载于:https://www.cnblogs.com/MagicZhao123/p/7252692.html

weixin_34161083

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
图片在父元素里面水平垂直居中

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compa...
复制链接

扫一扫