首页
问答
词典
文集
工具
退出登录
登录
我要提问
搜索
问答首页
制作网页时,怎样让图片垂直居中显示?
正
2
0
1
3
-
0
9
-
1
0
0
0
:
5
7
:
2
7
版本:
1
/
1
2
0
1
3
-
0
9
-
1
0
0
0
:
5
7
:
2
7
版本:
1
/
1
垂直
CSS
div
HTML
更多标签...
居中
图片
显示
制作网页
版权归作者所有。任何形式转载须联系作者获得授权。
作者:
正解网
来源:正解网
链接:
https://www.zhengjie.com/question/276ca8f1
投票
7
好问题
烂问题
修改
分享
扫码分享
分享到新浪微博
分享给QQ好友
分享到QQ空间
复制网址
OK了,粘贴即可!
问题状态
正解:
1
个
解答:
1
个
同问:
0
人
浏览:
854
次
相关问题
写网页时,如何让图片在浏览器垂直居中显示?
正解:
1
解答:
1
同问:
0
写网页时,怎样制作图片阴影效果?
正解:
1
解答:
1
同问:
0
HTML 和 CSS 怎样让文字溢出显示省略号?
正解:
1
解答:
1
同问:
0
什么是 CSS ?
正解:
1
解答:
1
同问:
0
Dreamweaver 写页面代码时,如何解决 IE8 中渐变效果带锯齿的问题?
正解:
1
解答:
1
同问:
0
修改提问
制作网页时,怎样让图片垂直居中显示?
垂直
CSS
div
HTML
居中
图片
显示
制作网页
提交
图片
把图片文件拖到这里即可上传
上传完,点击「插入图片」按钮插入
title
插入图片
图片链接:
图片描述:
添加
取消
视频
title
插入视频
视频链接:
添加
取消
出于安全考虑,目前正解网仅支持腾讯视频(支持 HTTPS)的视频播放页链接
提交
1
个解答
正
2
0
1
3
-
0
9
-
1
0
0
0
:
5
7
:
2
7
版本:
1
/
1
2
0
1
3
-
0
9
-
1
0
0
0
:
5
7
:
2
7
版本:
1
/
1
只需观看完一个15秒以内的短视频广告,即可查看解答。只需观看完一个15秒以内的短视频广告,即可查看解答。
看完广告,即可查看解答。只需观看完一个15秒以内的短视频广告,即可查看解答。
只需观看完一个15秒以内的短视频广告,即可查看解答。只需观看完一个15秒以内的短视频广告,即可查看解答。
看完广告,即可查看解答。只需观看完一个15秒以内的短视频广告,即可查看解答。
3316 人已浏览过此解答
免费查看解答
×
打开手机微信扫一扫免费查看解答
3步免费查看解答
2步免费查看解答
1️⃣ 长按保存下方小程序码
2️⃣ 打开手机微信的扫一扫
3️⃣ 点击右上角相册选取此码
1️⃣ 长按下方的小程序码
2️⃣ 在弹出的菜单中识别图中的小程序码
小程序码已失效
👉请点此刷新👈
60
s
自动显示解答
修改解答
制作网页时,有两种方法可以让图片垂直居中显示,具体如下: ##操作步骤 第一种方法是利用 CSS 中的 display:table-cell ,让元素会作为一个表格单元格显示(类似 <td> 和 <th>),然后利用 vertial-align:middle 方法来实现图片垂直居中。 但在 IE 中不支持这个方法,只能利用文字结合行高的方法来实现垂直居中。 具体方法: Html <div class="img_box"> </div> CSS .img_box { display:table-cell; width:200px; height:200px; vertical-align:middle; text-align:center; *float:left; *font-size:200px; *line-height:1; border:1px solid #ccc; } .img_box img { vertical-align:middle; } 带有 * 号的部分是针对 IE 浏览器的 hack ,利用字体的行高让图片垂直居中。 第二种方法:利用空的 span 标签作为垂直居中的钩子。 具体方法: Html <div class="img_box"> <span class="hook"> </span> </div> CSS .img_box { width:200px; height:200px; overflow:hidden; text-align:center; font-size:0; border:1px solid #000000; } .img_box .hook { display:inline-block; width:0; height:100%; overflow:hidden; margin-left:-1px; font-size:0; line-height:0; vertical-align:middle; } .img_box img { vertical-align:middle; border:0 none; } 如果 div 标签内的 span 标签和 img 标签不在同一行,不是紧密写在一起的话,那么就需要在外层的 div 中添加 font-size:0 。 添加 font-size:0 主要是考虑部分浏览器会对换行和空格产生一个「字符」做处理
提交
图片
把图片文件拖到这里即可上传
上传完,点击「插入图片」按钮插入
title
插入图片
图片链接:
图片描述:
添加
取消
视频
title
插入视频
视频链接:
添加
取消
出于安全考虑,目前正解网仅支持腾讯视频(支持 HTTPS)的视频播放页链接
提交
我的解答
提交
图片
把图片文件拖到这里即可上传
上传完,点击「插入图片」按钮插入
title
插入图片
图片链接:
图片描述:
添加
取消
视频
title
插入视频
视频链接:
添加
取消
出于安全考虑,目前正解网仅支持腾讯视频(支持 HTTPS)的视频播放页链接
提交
∧
回顶部