css设置水平坐对齐,CSS 水平对齐 (Horizontal Align)

CSS 水平对齐 (Horizontal Align)

关于 CSS 中元素的水平对齐 (Horizontal Align)，你可以使用多种属性来进行设置。

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

块元素对齐

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

块元素的例子：

文本对齐，请参阅 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 中，需要添加一些额外的代码。

实例

.container

{

text-align:center;

}

.center

{

margin-left:auto;

margin-right:auto;

width:70%;

background-color:#b0e0e6;

text-align:left;

}

尝试一下 »

点击“尝试一下”按钮查看在线实例

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

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

实例

.right

{

position:absolute;

right:0px;

width:300px;

background-color:#b0e0e6;

}

尝试一下 »

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

使用 float 属性设置左，右对齐

使用 float 属性是对齐元素的方法之一：

实例

.right

{

float:right;

width:300px;

background-color:#b0e0e6;

}

尝试一下 »

使用 Padding 设置垂直居中对齐

CSS 中一个简单的设置垂直居中对齐的方式就是头部顶部使用 padding:

.center { padding: 70px 0; border: 3px solid green; }

如果要水平和垂直都居中，可以使用 padding 和 text-align: center:

.center { padding: 70px 0; border: 3px solid green; text-align: center; }

Crossbrowser 兼容性问题

类似这样的元素对齐时，预先确定 margin 和元素的填充，始终是一个好主意。这是为了避免在不同的浏览器中的可视化差异。

IE8 和早期有一个问题，当使用 float 属性时。如果一个容器元素(在本例中

)指定的宽度，!DOCTYPE 声明缺失，IE8 和早期版本会在右边增添 17px 的 margin。这似乎是一个滚动的预留空间。使用 float 属性始终设置在 DOCTYPE 声明中！

实例

body

{

margin:0;

padding:0;

}

.right

{

float:right;

width:300px;

background-color:#b0e0e6;

}

尝试一下 »

css设置水平坐对齐,CSS 水平对齐 (Horizontal Align)相关推荐

css设置div不可编辑,css 怎么设置div不可点击
css设置div不可点击的方法:1.通过"event.preventDefault()"方法取消事件的默认动作:2.通过"event.stopPropagation()& ...
css设置四个圆角,css怎么设置4个圆角？css设置4个圆角方法
div如何设置css圆角边框?css设置4个圆角方法有哪些?这对于刚刚入门的css新手,比较陌生,那么css怎么设置4个圆角?下面我们来看一下css设置4个圆角方法.[推荐学习:CSS3教程] CSS ...
css设置个性字体大小,css设置字体大小的属性名是什么
css设置字体大小的属性名是"font-size",该属性使用css中表示尺寸的单位(px.em.rem等)设置字体大小,也可以使用百分号等单位来设置.实际上font-size设置 ...
css设置最小宽度消失,关于CSS：最小/最大宽度媒体查询没有语法意义
我发现(最小宽度/最大宽度)媒体查询的概念有些混乱. 自然,如果我要设计媒体查询,我想说(用伪代码). if(screen.width < 420) { ApplyStyle(); } 谈论mi ...
css设置字符长度,在css中设置最大字符长度
12 个答案: 答案 0 :(得分:199) 你总是可以通过设置max-width和溢出ellipsis来使用截断方法 p { white-space: nowrap; overflow: hidde ...
css设置打印样式表,[CSS] 创建打印样式表
[CSS] 创建打印样式表 Chrome浏览器有一项非常好用的功能, 就是直接将网页保存为PDF(Ctrl+P), 虽然部分人觉得没有用, 但我经常使用这个功能比如说, 有的博文写得不错, 想保存, ...
html边框定义css设置,表格边框的css语法
表格边框的css语法更新时间:2006年09月21日 00:00:00 作者: 我们知道Dreamweaver在表格制作方面做得非常出色,但是在某些时候还是必须结合css才能达到一些特定效果,下 ...
原生CSS设置网站主题色—CSS变量赋值
定义CSS变量在css文件顶部定义css变量,注意必须以--开头,使用:root包括这几个变量 :root {--main-bg-color: #ff7675;--color1: #fbfee9;- ...
css设置背景色渐变；css设置背景色不渐变颜色切换
/*颜色不渐变直接切换*/ background: linear-gradient(to right, #40474D 50%, #1E73BD 50%); /*颜色渐变*/ background: ...

css设置水平坐对齐,CSS 水平对齐 (Horizontal Align)

css设置水平坐对齐,CSS 水平对齐 (Horizontal Align)相关推荐

最新文章

热门文章