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 交通频道 作文范文 我爱跳舞作文500字 畅游上川岛 儿童诗歌:傍晚的树林 父亲的歌,永远唱不完 云水谣之歌 绿色生活作文500字 中秋思念祝福语 小学一年级作文400字:超级围棋赛 幽默言录,很有哲理的赶脚 乱……输 作文150字 家乡作文350 纪委书记“讲正气、树新风”心得体会 创优争先民主生活个人心得感言 莫把幺弦拨,怨极弦能说 这个季节,我们都在害怕作文400字 我帮妈妈洗头发作文1200字 买镜子800字 秋天的清晨700字 质量技术监督局全年工作总结 十字路口作文700字 小鸭得救记作文700字 她初恋了 瞧,那群女孩儿1000字 3.8妇女节活动促销方案 艺术节活动方案范文 莺啼序.春事 晨听鸟语 乡镇农村基层组织建设创先争优结对共建工作汇报 残缺的心 我的储蓄罐200字 细数那年青春 当你真正爱上一个人,你会有一种很亲切的感觉(爱情语录) 我体会到了成功的喜悦 情意相投 好朋友和家人作文250字 读《刘二牧传》等有感 这样做,是不是代表着不喜欢你了? 字里行间,寻觅温暖 环卫局年终述职报告 好人好事作文1000字 交际中损害个人魅力的二十六条错误 气球150字 张一一:莫让“热线”凉了百姓的心 Lovecat作文1200字 数控加工实习报告 绿色生活800字作文 不听劝告的小羊 履职总结 教学常规心得体会 清澈的水下月光

Copyright © 2016 phpStudy |