61,112
社区成员
发帖
与我相关
我的任务
分享请大神帮忙看看这个css样式如何写比较稳妥，困扰很久了
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
.div{width:100px;height:100px;background:#ccc;}
.div img{width:60%;display:block;margin:0 auto;}
</style>
<div class="div"><img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2460233569,1917036686&fm=85&app=79&f=JPEG"></div>
</body>
</html>
图片宽度为百分比，高度不定，div包裹图片，如何让图片在div中垂直居中呢？
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<style>
.div{width:100px;height:100px;background:#ccc;}
.div img{width:60%;display:block;margin:0 auto;}
</style>
<div class="div"><img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2460233569,1917036686&fm=85&app=79&f=JPEG"></div>
</body>
</html>
图片宽度为百分比，高度不定，div包裹图片，如何让图片在div中垂直居中呢？
...全文
请发表友善的回复…
发表回复
Let dreams fly 2019-11-02
- 打赏
- 举报
flex比较好用，或者还有一种方法，div可以在div中居中，所以你可以在img外面套一个div，这个时候img的display：block，可以避免img下的5px
沐浴 前端 2019-10-28
- 打赏
- 举报
有个想法不知道行不，给盒子一个内边距的值，然后图片可以百分百设置一下试试
前端开发小能手 2019-10-28
- 打赏
- 举报
developer涛涛 2019-10-28
- 打赏
- 举报
你不用定位就用行高调整图片在DIV中的垂直位置，把img的display属性去掉，如果要转成black，你就用定位去定到中间。
developer涛涛 2019-10-27
- 打赏
- 举报
div {line-height:100px;
text-align:center
}
qingwadaxia_1 2019-10-27
- 打赏
- 举报
有人能回答吗。。
qingwadaxia_1 2019-10-27
- 打赏
- 举报
这个不行啊
yuping511313 2019-10-26
- 打赏
- 举报
做成 div 的background-img 也可
