文档章节

CSS 水平对齐(Horizontal Align)

我有答案
 我有答案
发布于 2016/01/17 16:25
字数 640
阅读 25
收藏 0

CSS 水平对齐(Horizontal Align)


在CSS中,有几个属性用于元素水平对齐。


块元素对齐

块元素是一个元素,占用了全宽,前后都是换行符。

块元素的例子:

  • <h1>

  • <p>

  • <div>

文本对齐,请参阅 CSS文本 章节。.

在这一章中,我们会告诉你块元素如何水平对齐布局。


中心对齐,使用margin属性

块元素可以把左,右页边距设置为"自动"对齐。

Note: 在IE8中使用margin:auto属性无法正常工作,除非声明 !DOCTYPE

margin属性可任意拆分为左,右页边距设置自动指定,结果都是出现居中元素:

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

提示: 如果宽度是100%,对齐是没有效果的。

注意:IE5中块元素有一个margin处理BUG。为了使上述例子能工作,在IE5中,需要添加一些额外的代码。 实例


使用position属性设置左,右对齐

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

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

注意:绝对定位与文档流无关,所以它们可以覆盖页面上的其它元素。


Crossbrowser 兼容性问题

元素的填充,始终是一个好主意。这是为了避免在不同的浏览器中的可视化差异。

IE8和早期有一个问题,当使用position属性时。如果一个容器元素(在本例中<div class="container">)指定的宽度,!DOCTYPE声明是缺失,IE8和早期版本会在右边增添17px的margin。这似乎是一个滚动的预留空间。使用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;
}

Crossbrowser兼容性问题

类似这样的元素对齐时,预先确定margin和

元素的填充,始终是一个好主意。这是为了避免在不同的浏览器中的可视化差异。

IE8和早期有一个问题,当使用float属性时。如果一个容器元素(在本例中<div class="container">)指定的宽度,!DOCTYPE声明是缺失,IE8和早期版本会在右边增添17px的margin。这似乎是一个滚动的预留空间。使用float属性时始终设置在DOCTYPE声明中!

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


本文转载自:http://www.phplearn.cn/css/css-align.html

共有 人打赏支持
上一篇: CSS 组合选择符
下一篇: CSS Float(浮动)
我有答案
粉丝 6
博文 170
码字总数 943
作品 0
郑州
程序员
私信 提问
CSS3.0盒模型display: box;详解

box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。 目前box-flex属性还没有得到f...

黯灭
2013/12/09
0
0
箱子布局攻略 (HBox/VBox Layout)

一、了解箱子布局 箱子布局是一种新颖的布局方式,其布局模型可以更好地优化UI设计的工作。它率先在 XUL 界面语言中被提出,广泛应用于 Mozilla 的应用程序,如 FireFox 等等。在 CSS 布局系...

sp42
2010/05/28
0
0
CSS制作水平垂直居中对齐各种方法总结

标签: 杂谈 分类: 网页前端 方法一: 这种方法用来实现单行垂直居中是相当的简单的,你只要保证元素内容是单行,并且其高度是固定不变的,你只要将其“line-height”设置成和“height”值一...

未央花开
2014/04/01
0
0
html一些不常用的标签

<multicol cols=#> ... </multicol> #=列的数目 <multicol cols=2> text text text... </multicol> multicol gutter=#> ... </multicol> #=列间的空白 <multicol cols=2 gutter=100> text te......

如风般魅影
2014/03/22
71
2
Marquee代码简单实现滚动效果

<marquee id="affiche" align="left" behavior="scroll" bgcolor="#FF0000" direction="up" height="300" width="200" hspace="50" vspace="20" loop="-1" scrollamount="10" scrolldelay="1.....

邓含月
2014/02/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

数据库技术-Mysql主从复制与数据备份

数据库技术-Mysql 主从复制的原理: MySQL中数据复制的基础是二进制日志文件(binary log file)。一台MySQL数据库一旦启用二进制日志后,其作为master,它的数据库中所有操作都会以“事件”...

须臾之余
昨天
12
0
Git远程仓库——GitHub的使用(一)

Git远程仓库——GitHub的使用(一) 一 、 Git远程仓库 由于你的本地仓库和GitHub仓库之间的传输是通过SSH加密的,所以需要一下设置: 步骤一、 创建SSH key 在用户主目录下,看看有没有.ss...

lwenhao
昨天
2
0
SpringBoot 整合

springBoot 整合模板引擎 SpringBoot 整合Mybatis SpringBoot 整合redis SpringBoot 整合定时任务 SpringBoot 整合拦截器...

细节探索者
昨天
0
0
第二个JAVA应用

第二个JAVA应用 方法一:配置文件: # cd /usr/local/tomcat/conf/# vim server.xml</Host> <Host name="www.wangzb.cc" appBase="/data/wwwroot/www.wangzb.cc" //引用所......

wzb88
昨天
0
0
2019年阿里Java面试必问:JVM与性能优化+Redis+设计模式+分布式

前言 一年之计在于春 金三银四已经要到来,2019的新的开始,作为一个开发人员,你是否面上了自己理想的公司,薪资达到心中理想的高度? 面试:如果不准备充分的面试,完全是浪费时间,更是对...

火力全開
昨天
15
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部