一篇文章带你了解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;
} 注意：
绝对定位元素从正常流中移除，并且可以重叠元素。
相关推荐
qiupu 2020-11-04
RedCode 2020-10-28
jiedinghui 2020-10-25
Ladyseven 2020-10-22
hellowzm 2020-10-12
zuncle 2020-09-28
Ladyseven 2020-09-11
jiedinghui 2020-09-07
xiaohuli 2020-09-02
葉無聞 2020-09-01
impress 2020-08-26
ThikHome 2020-08-24
nicepainkiller 2020-08-20
hellowzm 2020-08-18