您的位置:CSS5 > div css问集 >

div align-center内容居中 看CSS如何实现

发布日期:2010-02-16 08:13:41 来源:css5.com.cn

<div align="center">DIV标签内的属性align="center"的作用是什么,使用CSS是否同样能实现这样效果,如果用CSS替换div align center又如何实现。

<div align="center">作用是让此DIV对象内的内容居中显示,可以使用div字体居中DIV内图片居中,均为横向水平居中内容无论是图片还是文字都能实现居中。

一、div使用align实现内容居中

看小例:
1、完整html网页源代码如下:

  1. <!DOCTYPE html> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta charset="utf-8" /> 
  5. <title>align center小例</title> 
  6. </head> 
  7. <body> 
  8. <div><img src="//www.css5.com.cn/404-logo.gif" width="161" height="30"></div> 
  9. <!-- 未设置居中align="center" --> 
  10.  
  11. <div align="center"><img src="//www.css5.com.cn/404-logo.gif" width="161" height="30"></div> 
  12. <!-- 对div设置 align="center" --> 
  13.  
  14. <!--HTML注释说明:为了便于截图,将代码换行,但不影响效果 --> 
  15. </body> 
  16. </html> 


2、其中<div align="center">作用是什么,有什么意思?

如代码片段:

  1. <div align="center"><img src="//www.css5.com.cn/404-logo.gif" width="161" height="30"></div> 

以上代码是什么意思,有什么作用?

其实作用是让此div盒子内图片内容居中显示

3、效果图说明

对div使用align属性即实现内容居中效果
对div使用align属性即实现内容居中效果

观察两个DIV盒子内图片,第一个未设置align属性,第二个设置align属性为center实现了DIV内容居中。

二、能否使用css实现align center居中?

答案是可以实现
使用CSS代码为:text-align:center

1、使用CSS代码替代div在使用align=center小例html代码如下:

  1. <!DOCTYPE html> 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta charset="utf-8" /> 
  5. <title>align center小例</title> 
  6. <style> 
  7. .CSS5{ text-align:center} 
  8. </style> 
  9. </head> 
  10. <body> 
  11. <div><img src="//www.css5.com.cn/404-logo.gif" width="161" height="30"></div> 
  12.  
  13. <div class="CSS5"><img src="//www.css5.com.cn/404-logo.gif" width="161" height="30"></div> 
  14. <!-- HTML注释说明: 对div设置class=CSS5,而CSS5样式设置居中样式 --> 
  15.  
  16. </body> 
  17. </html> 

2、同样实现居中效果截图:

使用css同样实现DIV内容居中效果
使用css text-align替代div align center同样实现DIV内容居中效果

CSS5小结:
可以说直接对div内加align="center"实现居中 等于 CSS text-align:center居中效果功能完全相同。

相关CSS推荐知识阅读:
1、css背景居中
2、css字体居中
3、css内容居中
4、html img
5、div图片居中

标签(Tag): 居中 align
本文分享URL地址:https://www.css5.com.cn/wenti/565.shtml

作者:css5

上一页:上一篇:学习css布局步骤?
下一页:下一篇:html键盘空格键敲入多个空格只能显示一个空格占位原因