WEB教程基地:www.91ctc.com为你搭建学习WEB技术的优秀平台
网站地图 加入收藏 设为首页
您的位置:本站首页>>网页设计制作技巧>>设置层(DIV左对齐、右对齐、居中对齐)的技巧

设置层(DIV左对齐、右对齐、居中对齐)的技巧

[ 录入者:91ctc | 时间:2012-02-03 08:02:59 | 作者: 91ctc| 来源:本站 | 浏览: 次 ]

DIV布局网页极其方便,但是其对齐方式的设置却没有表格(table)便捷,笔者总结了一些最为好用的方法:

1、设置当前DIV左对齐

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>网页设计技巧:DIV的对齐方式</title>
  6. <style type="text/css">
  7. <!--
  8. .contain { float:left; border:1px solid #FF6633; width:100px; height:20px;}
  9. -->
  10. </style>
  11. </head>
  12. <body>
  13. <div class="contain">
  14. </div>
  15. </body>
  16. </html>

这个时候我们即可将页面中的DIV块左对齐,如图:

DIV左对齐

2、设置当前DIV右对齐

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>网页设计技巧:DIV的对齐方式</title>
  6. <style type="text/css">
  7. <!--
  8. .contain { border:1px solid #FF6633; width:100px; height:20px;float:right;}
  9. -->
  10. </style>
  11. </head>
  12. <body>
  13. <div class="contain">
  14. </div>
  15. </body>
  16. </html>

这个时候我们即可将页面中的DIV块右对齐,如图:

DIV右对齐

3、设置当前DIV居中对齐

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>网页设计技巧:DIV的对齐方式</title>
  6. <style type="text/css">
  7. <!-- 
  8. .contain { border:1px solid #FF6633; width:100px; height:20px; margin:0px auto;}   
  9. -->
  10. </style>
  11. </head>
  12. <body> 
  13. <div class="contain">
  14. </div>
  15. </body>
  16. </html>

这个时候我们即可将页面中的DIV块居中对齐,如图:

DIV居中对齐

 

PS:如果您对本文有纠错、质疑、转载、举报等问题时,请加入到网站Q&Q&群:86783981(验证信息:91ctc.com)提交您的问题,让大伙一块讨论。谢谢您的支持,计算机教程中心网将会一如既往的提供优秀资源助您一臂之力!
关闭】【返回顶部

您可能感兴趣的文章
91ctc.com 网络先锋,引领科技,本站原创作品[转载请注明出处]。网站Q&Q&群:86783981(验证信息:91ctc.com)
Copyright© 2010-2017 计算机教程中心网 . All rights reserved. 苏ICP备11081842号