设置方法:1、使用“margin:0px auto”语句设置水平对齐;2、使用position属性,配合top、bottom、left和right属性设置左或右对齐;3、使用“float:right|left”语句设置左或右对齐。
本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。
1、使用 margin 属性来水平对齐
可通过将左边距和右边距设置为“auto”来对齐元素。但前提是必须声明!DOCTYPE,否则在IE8是无效的。这样就可以居中元素了,例如:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>document</title> <style> div{ margin: 0px auto; width: 70%; height: 300px; background-color: red; } </style> </head> <body> <div></div> </body> </html>
提示:如果宽度是 100%,则对齐没有效果。
2、使用 position 属性进行左和右对齐
使用这种方法在兼容性这一块无疑是最好的方法了,但当使用 position 属性时,请始终设置 !DOCTYPE 声明,在IE8 以及更早的版本存在一个问题。如果容器元素(在我们的案例中是 <div class="container">)设置了指定的宽度,并且省略了 !DOCTYPE 声明,那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。例如:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>document</title> <style> body{ margin: 0; padding: 0; } .container{ position: relative; width: 100%; } .right{ position: absolute; right: 0px; width: 300px; height: 50px; background-color: red; } </style> </head> <body> <div class="container"> <div class="right"></div> </div> </body> </html>
3、使用 float 属性来进行左和右对齐
当使用 float 属性时,IE8 以及更早的版本存在一个问题。如果省略 !DOCTYPE 声明,那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 float 属性时,请始终设置 !DOCTYPE 声明:例如:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>document</title> <style> body{ margin: 0; padding: 0; } .right{ float: right; width: 300px; height: 50px; background-color: red; } </style> </head> <body> <div class="container"> <div class="right"></div> </div> </body> </html>
以上就是css如何设置对齐的详细内容!
- 本站名称:清风资源网
- 本站永久地址:www.mcoxn.com
- 本站提供的源码、模板、插件等等其他资源,除资源本身问题外,都不包含免费技术服务,请大家谅解!
- 本站资源解压密码一般都为www.mcoxn.com如发现链接失效,请联系在线客服更新。
- 本站所有代码模板仅供学习交流使用,请勿用于商业用途,及违法侵权行为使用均与本站无关。
- 源码素材属于虚拟商品,具有可复制性,可传播性,一旦授予,不接受任何形式的退款、换货要求。
- 本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。
- 本站所有资源来源于公开互联网搜集和网友投稿提供,仅供个人学习研究使用,若本站收录的内容对您的版权或者利益造成损害,请提供相应的资质证明发邮件至kakbga@qq.com我们将于3个工作日内予以删除。
评论(0)