• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

如何实现div 图片在DIV内水平居中

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

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

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

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

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

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

align="center"使用方法:
 

<div align="center"></div>

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

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


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

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

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

使用CSS样式让DIV内图片居中

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

<!DOCTYPE > 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta charset="utf-8" /> 
<title>图片横向居中</title> 
<style> 
.divcss5{text-align:center} 
</style> 
</head> 
<body> 
<div class="divcss5"><img src="http://www.divcss5.com/img201305/divcss5-logo-201305.gif" /></div> 
</body> 
</html> 


2、水平居中实例截图

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

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

 到此这篇关于如何实现div 图片在DIV内水平居中的文章就介绍到这了,更多相关div图片居中内容请搜索极客世界以前的文章或继续浏览下面的相关文章,希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
DIV CSS实现网页背景半透明效果发布时间:2022-06-21
下一篇:
CSS 首行缩进两个文字发布时间:2022-06-21
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap