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。

审核编辑：符乾江