CSS对齐方式的详细讲解

一、居中1． 居中对齐元素

将块元素水平居中对齐（像 ＜div＞） ， 使用 margin： auto；

设置元素的宽度将阻止它伸展到容器的边缘。

然后元素将占用指定的宽度，剩下的空间将平分在两个边距之间：

这个div是居中的。

．center ｛ margin： auto； width： 50％； border： 3px solid green； padding： 10px；｝

注意：如果没有设置宽度属性，则居中对齐没有效果 （或者设置到100％）．

2． 居中对齐文本

将元素内部的文本居中， 使用text－align： center；

这些文本是居中的。

．center ｛ text－align： center； border： 3px solid green；｝

3． 居中图片

居中图片， 使用 margin： auto； 并且设置为块级元素：

img ｛ display： block； margin： auto； width： 40％；｝

二、左右

HTML代码：

＜html lang＝＂en＂＞＜head＞ ＜meta charset＝＂UTF－8＂＞ ＜title＞编程字典＜／title＞
＜／head＞＜body＞
＜h2＞右对齐＜／h2＞ ＜p＞如何正确定位元素与位置属性的一个例子：＜／p＞
＜div class＝＂right＂＞ ＜p＞在我年轻而脆弱的岁月里，父亲给了我一些我一直以来一直在思考的建议．＜／p＞ ＜／div＞
＜／body＞＜／html＞

1． 左右对齐 － 使用 position

对齐元素的一种方法是使用 position： absolute；

在我年轻而脆弱的岁月里，父亲给了我一些我一直以来一直在思考的建议。

．right ｛ position： absolute； right： 0px； width： 300px； border： 3px solid ＃73AD21； padding： 10px；｝

注意：

绝对定位元素从正常流中移除，并且可以重叠元素。

当使用 position对齐元素时， 总是定义 margin 和 padding 为 ＜body＞ 元素． 这是为了避免不同浏览器的视觉差异。

还有IE8和早期版本有一些问题， 当使用 position． 如果容器元素有一个指定的宽度 （例如：＜div class＝＂container＂＞） ， 并且没有设置！DOCTYPE， IE8 和早期版本将添加 17px 外边距到右边． 这似乎是一条为滚动条预留空间． 因此，总是声明 ！DOCTYPE 当使用 position时：

body ｛ margin： 0； padding： 0；｝
．container ｛ position： relative； width： 100％；｝
．right ｛ position： absolute； right： 0px； width： 300px； background－color： ＃b0e0e6；｝

2． 左右对齐 － 使用 float

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

．right ｛ float： right； width： 300px； border： 3px solid ＃73AD21； padding： 10px；｝

提示：

当将元素使用浮动对齐时，总是为body元素定义边距和填充。这是为了避免不同浏览器的视觉差异。

body ｛ margin： 0； padding： 0；｝
．right ｛ float： right； width： 300px； background－color： ＃b0e0e6；｝

效果图：

三、垂直居中，水平居中

HTML代码：

＜html lang＝＂en＂＞＜head＞ ＜meta charset＝＂UTF－8＂＞ ＜title＞编程字典＜／title＞
＜／head＞＜body＞
＜h2＞居中＜／h2＞ ＜p＞在这个实例中， 我们使用定位和transform属性实现元素的水平和垂直居中：＜／p＞
＜div class＝＂center＂＞ ＜！－－ ＜p＞我是垂直居中的．＜／p＞ －－＞ ＜p＞我水平垂直居中．＜／p＞ ＜／div＞
＜p＞注意： transform属性不支持IE8和更早的版本．＜／p＞
＜／body＞＜／html＞

1． 使用 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；｝

2． 使用 line－height

另一个技巧是使用 line－height 属性值等于 height 属性值．

．center ｛ line－height： 200px； height： 200px； border： 3px solid green； text－align： center；｝
If the text has multiple lines， add the following： ．center p ｛ line－height： 1．5； display： inline－block； vertical－align： middle；｝3． 使用 position ＆ transform

如果padding和line－height不可选，第三种解决方案是使用定位和变换属性：

．center ｛ height： 200px； position： relative； border： 3px solid green；｝
．center p ｛ margin： 0； position： absolute； top： 50％； left： 50％； transform： translate（－50％， －50％）；｝

四、总结

本文基于Html基础，主要介绍了Html中对齐的方式，对于对齐中的标签做了详细的讲解，用丰富的案例 ，代码效果图的展示，帮助大家更好理解 。

最后，希望可以帮助大家更好的学习CSS3。

审核编辑：符乾江