CSS水平对齐示例介绍


在 CSS 中,可以使用多种属性来水平对齐元素。

对齐块元素

块元素指的是占据全部可用宽度的元素,并且在其前后都会换行。

块元素的例子:

复制代码
代码如下:

<h1>
<p>
<div>

使用 margin 属性来水平对齐

可通过将左和右外边距设置为 "auto",来对齐块元素。

把左和右外边距设置为 auto,规定的是均等地分配可用的外边距。结果就是居中的元素:

实例

复制代码
代码如下:

.center
{
margin-left:auto;
margin-right:auto;
width:70%;
background-color:#b0e0e6;
}

使用 position 属性进行左和右对齐

对齐元素的方法之一是使用绝对定位:

实例 

复制代码
代码如下:

.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

注释:绝对定位元素会被从正常流中删除,并且能够交叠元素。

跨浏览器兼容性问题

当像这样对齐元素时,对 <body> 元素的外边距和内边距进行预定义是一个好主意。这样可以避免在不同的浏览器中出现可见的差异。

当使用 position 属性时,IE8 以及更早的版本存在一个问题。如果容器元素(在我们的案例中是 <div class="container">)设置了指定的宽度,并且省略了 !DOCTYPE 声明,那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 position 属性时,请始终设置 !DOCTYPE 声明:

实例

复制代码
代码如下:

body
{
margin:0;
padding:0;
}
.container
{
position:relative;
width:100%;
}
.right
{
position:absolute;
right:0px;
width:300px;
background-color:#b0e0e6;
}

使用 float 属性来进行左和右对齐

对齐元素的另一种方法是使用 float 属性:

实例

复制代码
代码如下:

.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}

跨浏览器兼容性问题

当像这样对齐元素时,对 <body> 元素的外边距和内边距进行预定义是一个好主意。这样可以避免在不同的浏览器中出现可见的差异。

当使用 float 属性时,IE8 以及更早的版本存在一个问题。如果省略 !DOCTYPE 声明,那么 IE8 以及更早的版本会在右侧增加 17px 的外边距。这似乎是为滚动条预留的空间。当使用 float 属性时,请始终设置 !DOCTYPE 声明:

实例

复制代码
代码如下:

body
{
margin:0;
padding:0;
}
.right
{
float:right;
width:300px;
background-color:#b0e0e6;
}



相关阅读:
mysql select语句操作实例
js强制把网址设为默认首页
PHP中$this和$that指针使用实例
APK程序获取system权限的方法
Yosemite 10.10安装盘 U盘制作教程
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
js 浏览本地文件夹系统示例代码
C#控制台程序实现开启、关闭SQLServer服务的代码分享
CASE表达式实现基于条件逻辑来返回一个值
执行一条sql语句update多条记录实现思路
jQuery技巧之让任何组件都支持类似DOM的事件管理
使用CSS媒体查询创建响应式布局教程
c#递归遍历文件夹示例
php Hex RGB颜色值互换的使用
快速导航
PHP MySQL HTML CSS JavaScript MSSQL AJAX .NET JSP Linux Mac ASP 服务器 SQL jQuery C# C++ java Android IOS oracle MongoDB SQLite wamp 交通频道 作文范文 隐形的残忍作文 增强共青团员意识主题教育心得体会 携半卷愁怨,我打江南走过 最优秀的老师,是生存 咏史诗。章华台 长街灯灭 曲终人散 家访手记范文 促进科技服务业发展方法与措施 安静的日子 雨丝.落日,遐想,回忆,殇 冬的精灵作文800字 逗比搞笑日志:我爱学习学习让我快乐 学院2013学年度第一学期工作计划 中国新生代女演员周冬雨经典语录 中秋节祝福语说说 我的朋友王浩然作文150字 Xx镇xx村生态移民建设工作总结 人生如书,每个人都是自己的作者 关于端午节作文600字:端午节 妈妈的眼睛作文250字 没人扶你的时候,自己站直! 努力是奇迹的另一个名字 小学六年级作文450字:思念的味道 创建“文明大学生、文明宿舍、文明班级”决心书 时光·梦想 生命应该燃烧作文1700字 半生的绻恋 初中初三作文800字:假如我是环保局局长 陈萧、谢谢你 天使独舞 怀武昌栖一二首 给小伙伴儿们的生日祝福语 初中初三作文350字:说说那首歌 看图写话 柳绿花红的春天 被栓脚的小鸟 小学英语国培培训总结 鹊桥仙·己酉山行书所见 给弟弟推荐的一本书作文600字 地板的苦 2015前台年终工作总结 大学生会计师事务所实习报告 “践行社会主义核心价值观 争做有为青年”活动方案 小学生运动会加油稿精选 荒野猎人观后感 让行善成为一种习惯_1200字 故乡的云彩作文650字 再见了,母校,再见了,老师作文300字 学习是快乐的作文500字 研究室年终工作总结范文 也许放弃 会是最好的结局

Copyright © 2016 phpStudy |