.center {    margin: auto;    width: 50%;    border: 3px solid green;    padding: 10px;}

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

img {    display: block;    margin: auto;    width: 40%;}

  编程字典

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

.right {    position: absolute;    right: 0px;    width: 300px;    border: 3px solid #73AD21;    padding: 10px;}

) , 并且没有设置!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代码：

  编程字典

居中

在这个实例中, 我们使用定位和transform属性实现元素的水平和垂直居中:

注意: transform属性不支持IE8和更早的版本.

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。

想学习更多Python网络爬虫与数据挖掘知识，可前往专业网站：http://pdcfighting.com/