欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术!

div图片居中-图片在DIV内水平居中

div图片居中-图片在DIV内居中,让图片中DIV盒子里水平居中。

让图片中 DIV对象盒子内水平居中,和让文字字体在DIV盒子内水平居中 CSS相同。

CSS让对象内容居中样式单词为:
text-align:center

text-align 为内容居于对象什么位置属性
center值为居中

一、传统HTML让图片横向水平居中方法   -   TOP

直接在标签对象内加“align="center"”即可让对象内图片横向水平居中显示。

align="center"使用方法:
<div align="center"></div>

align="center"居中图片 DIV+CSS实例代码:

  1. <!DOCTYPE > 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta charset="utf-8" /> 
  5. <title>图片横向居中</title> 
  6. </head> 
  7. <body> 
  8. <div align="center"><img src="http://www.divcss5.com/img201305/divcss5-logo-201305.gif" /></div> 
  9. </body> 
  10. </html> 

html align="center"图片居中实例截图

html图片水平居中效果截图
html 图片水平居中效果截图

二、CSS让图片中DIV对象内水平居中   -   TOP

使用CSS样式让DIV内图片居中(水平居中)(相关知识阅读: html img图片)

1、实例 HTML+CSS完整代码如下:

  1. <!DOCTYPE > 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta charset="utf-8" /> 
  5. <title>图片横向居中</title> 
  6. <style> 
  7. .divcss5{text-align:center} 
  8. </style> 
  9. </head> 
  10. <body> 
  11. <div class="divcss5"><img src="http://www.divcss5.com/img201305/divcss5-logo-201305.gif" /></div> 
  12. </body> 
  13. </html> 

2、水平居中实例截图

使用css设置div里图片居中实例截图
使用css样式设置div里图片居中实例截图

小结:
无论文字居中、图片居中等内容居中我们都可以使用以上两种方法实现,一般推荐使用CSS进行,但网页多时候,我们只需要修改 CSS文件里对应一处选择器样式即可修改内容居中、居左、居右。

相关阅读:
1、 css内容居中
2、 div字体居中
3、 div全屏
4、 div横排
5、 CSS背景图片居中
6、 div布局居中
7、 div align center
8、 css img图片

如需转载,请注明文章出处和来源网址: http://www.divcss5.com/rumen/r567.shtml

  • 上一篇: div全屏宽度实现
  • 下一篇: div 居左靠左显示 CSS居左靠左
必备CSS教程Essential CSS Tutorials
必备HTML基础教程Essential HTML Tutorials
最新文章 NEWS
  • CSS 简介需要具备的基础知识
  • 如何使用纯CSS 实现一个没有DOM元素的动画效果
  • 什么是css盒子模型?
  • 什么是css盒子模型?
  • css技术是什么
  • 区块属性: (Block)
  • 五、CSS连接属性:
  • 虚拟主机相关知识
  • DIV CSS加载失败
  • DIV+CSS规范命名大全集合
CSS 特效 CSS EFFECTS
  • 纯DIV+CSS下拉菜单模块模板
    纯DIV+CSS下拉菜单模块模板
  • DIV+CSS分页_CSS翻页代码模板
    DIV+CSS分页_CSS翻页代码模板
  • css form实例 用CSS实现表单form布局实例
    css form实例 用CSS实现表单form布局实例
  • 经典DIV+CSS下拉菜单
    经典DIV+CSS下拉菜单
  • div+css不间断上下滚动模板
    div+css不间断上下滚动模板
  • 向上不间断滚动div+css+js模板
    向上不间断滚动div+css+js模板
相关文章 RELATED
  • 属性选择器 [属性 $= value]
  • 属性选择器 [属性 ^= value]
  • 属性选择器 [属性 |= value]
  • 属性选择器 [属性 *= value]
  • 属性选择器 [属性 ~= value]
  • 属性选择器(X[title][href][data][foo])
  • 关系选择器,X+Y,X>Y,X~Y
  • 伪类选择器link/:visited/:hover/:active(下一篇文章专门写伪类)
  • 后代选择器(X Y)
  • html标签(X)
热点文章 HOT
  • css 字间距离_css 字体字符间距设置
  • CSS border边框属性教程(color style)
  • div css float浮动用法(left right)
  • CSS 文本字体颜色(CSS color)
  • CSS 高度(css height)
  • DIV+CSS虚线边框|CSS虚线下划线及虚线列表教程
  • CSS如何设置html table表格边框样式
  • DIV+CSS中让布局居中_背景图片居中_文字内容居中

深圳坪山网站建设公司淮北网站优化报价泰州网站优化效果网站做SEO优化多少钱怎样判断网站优化程度昌乐网站优化产品江干区网站优化哪里好长沙百度网站排名优化网站优化和托管的关系黄山网站优化技巧宜城市企业网站优化怎么样广州市seo网站优化代理重庆网站排名优化教程小海佛山涂料网站seo优化迁安知名的网站优化福田搜索引擎网站优化经验慈溪专业网站优化枣庄网站关键词优化莱芜网站优化方案邯郸馆陶网站优化推广南雄网站关键字优化东坑网站优化哪个比较好崇左seo网站优化黄山网站优化排名的基本方法怎么优化网站值得易速达宝鸡网站优化排名多少钱网站换图片会影响优化吗泰州工商网站优化供应网站关系模式优化网站推广优化招商电话钟祥市网站关键词排名优化报价香港通过《维护国家安全条例》两大学生合买彩票中奖一人不认账让美丽中国“从细节出发”19岁小伙救下5人后溺亡 多方发声卫健委通报少年有偿捐血浆16次猝死汪小菲曝离婚始末何赛飞追着代拍打雅江山火三名扑火人员牺牲系谣言男子被猫抓伤后确诊“猫抓病”周杰伦一审败诉网易中国拥有亿元资产的家庭达13.3万户315晚会后胖东来又人满为患了高校汽车撞人致3死16伤 司机系学生张家界的山上“长”满了韩国人?张立群任西安交通大学校长手机成瘾是影响睡眠质量重要因素网友洛杉矶偶遇贾玲“重生之我在北大当嫡校长”单亲妈妈陷入热恋 14岁儿子报警倪萍分享减重40斤方法杨倩无缘巴黎奥运考生莫言也上北大硕士复试名单了许家印被限制高消费奥巴马现身唐宁街 黑色着装引猜测专访95后高颜值猪保姆男孩8年未见母亲被告知被遗忘七年后宇文玥被薅头发捞上岸郑州一火锅店爆改成麻辣烫店西双版纳热带植物园回应蜉蝣大爆发沉迷短剧的人就像掉进了杀猪盘当地回应沈阳致3死车祸车主疑毒驾开除党籍5年后 原水城县长再被查凯特王妃现身!外出购物视频曝光初中生遭15人围殴自卫刺伤3人判无罪事业单位女子向同事水杯投不明物质男子被流浪猫绊倒 投喂者赔24万外国人感慨凌晨的中国很安全路边卖淀粉肠阿姨主动出示声明书胖东来员工每周单休无小长假王树国卸任西安交大校长 师生送别小米汽车超级工厂正式揭幕黑马情侣提车了妈妈回应孩子在校撞护栏坠楼校方回应护栏损坏小学生课间坠楼房客欠租失踪 房东直发愁专家建议不必谈骨泥色变老人退休金被冒领16年 金额超20万西藏招商引资投资者子女可当地高考特朗普无法缴纳4.54亿美元罚金浙江一高校内汽车冲撞行人 多人受伤

深圳坪山网站建设公司 XML地图 TXT地图 虚拟主机 SEO 网站制作 网站优化