html5中怎么实现居中显示图片
原创图片居中方法:1、利用“margin:0 auto”实现水平居中;2、利用“text-align:center”实现水平居中;3、利用line-height实现垂直居中;4、利用table实现垂直居中;5、利用position实现垂直居中。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
一、首先,我们来看看css图片水平居中的方法
1、利用margin:0 auto实现图片水平居中
html图片水平居中代码:
<div style="text-align:center;width:500px;border:greensolid1px;"> @@##@@ </div>
2、利用文本的水平居中属性text-align:center实现图片水平居中
立即学习“前端免费学习笔记(深入)”;
html图片水平居中代码:
<div style="text-align:center;width:500px;border:greensolid1px;"> @@##@@ </div>
二、我们来看看css图片垂直居中的实现方法
1、利用line-height实现图片垂直居中
html图片垂直居中代码如下:
<div style="text-align:center;width:500px;height:200px;line-height:200px;border:greensolid1px;"> @@##@@ </div>
注意:此种方法需要注明高度才可以使用。
2、利用table实现图片垂直居中
html图片垂直居中代码如下:
<div style="text-align:center;width:500px;height:200px;display:table;border:greensolid1px;"> <span style="display:table-cell;vertical-align:middle;"> @@##@@ </span> </div>
注意:此种方法是利用了table的垂直居中属性
说明:这里使用display:table;和display:table-cell;来模拟table,这种方法并不兼容IE6/IE7,IE67不支持display:table,如果你不需要支持IE67那就可以用
这种方法有一个缺点:当你设置了display:table;可能会改变你的原有布局
3、利用position实现图片垂直居中
html图片垂直居中代码如下:
<div style="width:500px;height:200px;position:relative;border:greensolid1px;"> @@##@@ </div>
说明:如果已知图片的宽度和高度可以用这种方法。
推荐学习:html5视频教程
以上就是html5中怎么实现居中显示图片的详细内容,更多请关注IT视界其它相关文章!
HTML速学教程(入门课程)HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!
下载 相关标签: css 来源:IT视界 收藏 点赞 上一篇:HTML/css实现好玩的文本液体填充效果 下一篇:html如何实现页面跳转 本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn 作者最新文章- ace-guard client exe是什么程序 2023-03-17 10:54:01
- 开gzip有什么好处?php如何判断服务器是否支持gzip压缩 2023-03-11 10:02:01
- Python邮件处理示例 2023-03-11 09:30:01
- php局域网如何获取所有用户的电脑IP和主机名、mac地址 2023-03-11 09:24:01
- 马上实习如何选择前端后端? 2023-03-11 09:22:02
- php特性包括哪些?php的优势有6种 2023-03-11 09:08:02
- 详细介绍:php前端和后端有什么区别? 2023-03-11 08:54:01
- 常见的软件开发模型有哪些 2023-02-16 14:31:53
- mpg格式是什么意思? 2023-02-16 14:31:33
- 大数据在生活中的应用有哪些 2023-02-16 14:31:12
- 2024欧意交易所app官方下载
- 推特是什么东西
- 未注销的电话卡有哪些影响
- 删除的抖音恢复教程
- 电话卡欠费停机多久会被注销
- 灵动岛功能怎么玩
- 电话卡欠费三个月会自动注销吗
- 抖音ip属地怎么关闭
- html居中问题求各位指导下 谢谢_html/css_WEB-ITnose
- html居中问题_html/css_WEB-ITnose
- html如何让表格居中
- HTML速学教程(入门课程)
- 前端课程(五郞八卦棍系列)第一棍:HTML5 43209次学习 收藏
- 新独孤九贱之:HTML5极速入坑 32132次学习 收藏
- HTML/CSS技术小知识每日分享 96002次学习 收藏
- [表单按钮] jQuery企业留言表单联系代码
- [播放器特效] HTML5 MP3音乐盒播放特效
- [菜单导航] HTML5炫酷粒子动画导航菜单特效
- [表单按钮] jQuery可视化表单拖拽编辑代码
- [播放器特效] VUE.JS仿酷狗音乐播放器代码
- [html5特效] 经典html5推箱子小游戏
- [图片特效] jQuery滚动添加或减少图片特效
- [相册特效] CSS3个人相册封面悬停放大特效
- 关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
- IT视界:公益在线php培训,帮助PHP学习者快速成长!
-
关注服务号
微信扫码
技术交流群
关注IT视界服务号QQ扫码
加入技术交流群
扫描下载App
- IT视界订阅号
- 每天精选资源文章推送
- IT视界APP
- 随时随地碎片化学习
- IT视界抖音号
- 发现有趣的
Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部