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 交通频道 作文范文 初中初三作文450字:停电之苦 小动物们得聚会 母亲的转变,全是爱 感谢嫉妒者 老师,不忍心对你说bye bye 职场上被重用的六大秘诀 青花短巷作文1000字 端午节优秀作文:端午节的来历 小学科学教师技能大赛观摩心得体会 小学四年级作文350字:我们家的三口人 移民信息工作交流材料 市委政策研究室主任在全市调查研究工作会议上的讲话 家乡的春节时洒作文450字 中学生演讲稿:爱让世界温暖 毕业感言100字 雪天,一个快乐的天使 给老婆的检讨书 唯美励志短句大全_经典唯美励志短句_句句入心 人是否应向动物学习呢作文1000字 爱情伤感哲理句子 爱弥儿读后感600字 古风旧月 2015大学生党校学习心得体会 学院专科毕业实习总结 生命的芳香650字 外公 2015大学清明放假通知范文 公司项目及研究报告评级办法 感悟人生作文500字 玛瑙河赋 可怜的小动物作文300字 我的代课老师 祝福语大全简短 高一语文工教学作总结 祖国-母亲 姑娘,你很美好,但很多时候,这世界骗的就是你 中班美术教案:我给老师画张相 寒假社会实践论文_社会实践报告 淡淡的,月光 月球的奥秘读后感 临平道中 宽容之法 原来云离开风,一样可以幸福! 《王二小》读后感作文700字 梦之声450字 小学作文:成长的烦恼 几多繁华,终是换不回你 优秀入团申请书范文 牙齿的烦恼梅慧芸作文300字 愿岁月静好,你亦无恙

Copyright © 2016 phpStudy |