小白教程

 找回密码
 立即注册
查看: 9828|回复: 5

帮忙看看这个css样式如何写比较稳妥,困扰很久了 Web 开发

[复制链接]

1

主题

2

帖子

5

积分

新手上路

Rank: 1

积分
5
发表于 2021-3-9 17:25:17 | 显示全部楼层 |阅读模式
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Document</title>
  6. </head>
  7. <body>

  8.   <style>
  9. .div{width:100px;height:100px;background:#ccc;}
  10. .div img{width:60%;display:block;margin:0 auto;}
  11.   </style>
  12.   <div class="div"><img src="https://ss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2460233569,1917036686&fm=85&app=79&f=JPEG"></div>
  13. </body>
  14. </html>
复制代码
图片宽度为百分比,高度不定,div包裹图片,如何让图片在div中垂直居中呢?

本帖寻求最佳方案

,目前已有 5 个回复 我要奖励
回复

使用道具 举报

0

主题

1

帖子

1

积分

新手上路

Rank: 1

积分
1
发表于 2021-3-12 13:32:58 | 显示全部楼层
做成 div 的background-img 也可
回复

使用道具 举报

0

主题

1

帖子

1

积分

新手上路

Rank: 1

积分
1
发表于 2021-3-25 18:59:45 | 显示全部楼层
div {line-height:100px;
        text-align:center
}
回复

使用道具 举报

0

主题

1

帖子

1

积分

新手上路

Rank: 1

积分
1
发表于 2021-4-4 14:25:54 | 显示全部楼层
我有一个想法,给盒子一个填充值,然后图像可以100%设置尝试
回复

使用道具 举报

1

主题

3

帖子

6

积分

新手上路

Rank: 1

积分
6
发表于 2021-4-11 01:53:25 | 显示全部楼层
您可以使用行高来调整图像在DIV中没有定位的垂直位置,删除img display属性,如果您想将其更改为黑色,则可以使用定位来使其居中
回复

使用道具 举报

0

主题

1

帖子

1

积分

新手上路

Rank: 1

积分
1
发表于 2021-4-26 03:39:38 | 显示全部楼层

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

x
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|小白教程 ( 粤ICP备20019910号 )

GMT+8, 2024-9-20 14:58 , Processed in 0.140948 second(s), 28 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc. Template By 【未来科技】【 www.wekei.cn 】

快速回复 返回顶部 返回列表