一、居中
1. 居中对齐元素
将块元素水平居中对齐(像
设置元素的宽度将阻止它伸展到容器的边缘。
然后元素将占用指定的宽度,剩下的空间将平分在两个边距之间:
这个div是居中的。
.center { margin: auto; width: 50%; border: 3px solid green; padding: 10px;}
![02391bb6c372f2a5dbe48b0fe746fe7e.png](https://i-blog.csdnimg.cn/blog_migrate/4a6f1389cdeedda693303665ba30ff3e.jpeg)
注意:如果没有设置宽度属性,则居中对齐没有效果 (或者设置到100%).
2. 居中对齐文本
将元素内部的文本居中, 使用text-align: center;
这些文本是居中的。
.center { text-align: center; border: 3px solid green;}
![b21b0e7f2e38373d3b2de27a094827a9.png](https://i-blog.csdnimg.cn/blog_migrate/d4c34077999cb9f115ee928a4c9dbc73.jpeg)
3. 居中图片
居中图片, 使用 margin: auto; 并且设置为块级元素:
img { display: block; margin: auto; width: 40%;}
![b50e1eabbc076f1ec9e04e5fcb803ad9.png](https://i-blog.csdnimg.cn/blog_migrate/7c4182934af3a2303fedf973aadc513f.jpeg)
二、左右
HTML代码:
编程字典
右对齐
如何正确定位元素与位置属性的一个例子:
在我年轻而脆弱的岁月里,父亲给了我一些我一直以来一直在思考的建议.
1. 左右对齐 - 使用 position
对齐元素的一种方法是使用 position: absolute;
在我年轻而脆弱的岁月里,父亲给了我一些我一直以来一直在思考的建议。
.right { position: absolute; right: 0px; width: 300px; border: 3px solid #73AD21; padding: 10px;}
注意:
绝对定位元素从正常流中移除,并且可以重叠元素。
当使用 position对齐元素时, 总是定义 margin 和 padding 为 元素. 这是为了避免不同浏览器的视觉差异。
还有IE8和早期版本有一些问题, 当使用 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;}
效果图:
![975e684738cb25820bdec932f1ad3298.png](https://i-blog.csdnimg.cn/blog_migrate/bfd3f5a053df0148cce36f74ab26429f.jpeg)
三、垂直居中,水平居中
HTML代码:
编程字典
居中
在这个实例中, 我们使用定位和transform属性实现元素的水平和垂直居中:
我水平垂直居中.
注意: transform属性不支持IE8和更早的版本.
![4023f00d9bb22273ce909d27570579ef.png](https://i-blog.csdnimg.cn/blog_migrate/5a95a7a41d9b5ba2a325706bd1213290.jpeg)
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;}
![944e169ec2e650d9612d9befb7d2cc1f.png](https://i-blog.csdnimg.cn/blog_migrate/a6b303582753139f1cd02aa9e3626b55.jpeg)
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%);}
![12a4752ed90166c3269c902dc2403213.png](https://i-blog.csdnimg.cn/blog_migrate/6d722c50fbe0424dfdad3a434ede3ee6.jpeg)
四、总结
本文基于Html基础,主要介绍了Html中对齐的方式,对于对齐中的标签做了详细的讲解,用丰富的案例 ,代码效果图的展示,帮助大家更好理解 。
最后,希望可以帮助大家更好的学习CSS3。
想学习更多Python网络爬虫与数据挖掘知识,可前往专业网站:http://pdcfighting.com/