【CSS】定义元素的对齐方式

1、文本内容居中对齐:text-align。
扩展用法：父元素嵌套子元素时，且子元素的宽度小于父元素宽度，使用text-align:center，可以实现子元素的居中对齐。

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>文本内容水平居中</title>
 6     <style>
 7         .text-center{
 8             border:3px solid red;
 9             text-align: center;
10             /*text-align: right;*/
11         }
12     </style>
13 </head>
14 <body>
15     <div class="text-center">
16         水平居中对齐
17     </div>
18 </body>
19 </html>

View Code

2、图片居中对齐:先指定width,display:block(前提)，再使用margin:auto。(非块级元素使用margin:auto时，不会居中，必须指定display:block，才会居中)

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>图片水平居中对齐</title>
 6     <style>
 7 
 8         /*
 9         margin:auto，对行内元素不起作用，所以需要把图片display:block，变成一个块级元素，同时设置图片的width，
10         margin:auto才会起作用
11         */
12         img{
13             display: block;
14             margin: auto;
15             width: 200px;
16             height: 200px;
17         }
18     </style>
19 </head>
20 <body>
21     <img src="./suihua.png"  alt="">
22 </body>
23 </html>

View Code

3、元素左对齐、元素右对齐、元素居中对齐

元素居中对齐:先指定width(前提)，再使用margin:auto
左右对齐解决方式一:position和left:0或right:0
左右对齐解决方式二:position和float:left或float:right

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>元素水平居中对齐、左对齐、右对齐</title>
 6     <style>
 7 
 8         /* 设置body元素的margin:0，padding:0，从而达到在所有浏览器一样的效果
 9            不设置的情况下，不同的浏览器，body元素的margin和padding默认值不一样
10         */
11         body{
12             margin:0;
13             padding: 0;
14         }
15 
16         /*
17             元素水平居中对齐：同时指定width和margin:auto就可以实现
18             不指定width，margin:auto不会起作用，实现不了水平居中对齐
19         */
20         .center{
21             border:3px solid red;
22             width: 50%;
23             margin: auto;
24         }
25 
26 
27         /*利用postion，加left:0或right:0，从而实现元素的左对齐和右对齐*/
28         .container1{
29             position:relative;
30             border: solid 3px red;
31 
32         }
33         .right1{
34             background-color: lightblue;
35             width: 200px;
36             height: 100px;
37             position: absolute;
38             right:0;      /*右对齐*/
39             /*left:0;   左对齐*/
40         }
41 
42         /*利用float*/
43         .container2{
44             position:relative;
45             border: solid 3px red;
46             overflow: auto;
47         }
48 
49         .right2{
50             background-color: lightblue;
51             width: 200px;
52             height: 100px;
53             float: right;
54         }
55     </style>
56 </head>
57 <body>
58     <h1>元素水平居中对齐</h1>
59     <div class="center">
60         center align
61     </div>
62 
63     <h1>元素水平左右对齐方式一</h1>
64     <div class="container1">
65         <div class="right1">
66             <p>段落的内容</p>
67         </div>
68     </div>
69 
70     <br/><br/><br/><br/><br/><br/><br/>
71 
72     <h1>元素水平左右对齐方式二</h1>
73     <div class="container2">
74         <div class="right2">
75             <p>段落的内容</p>
76         </div>
77     </div>
78 
79 </body>
80 </html>

View Code

4、垂直居中对齐

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>垂直居中对齐</title>
 6     <style>
 7         /*垂直居中对齐实现方式一:通过padding属性来实现。(当元素指定了height，通过padding来实现垂直居中就不好使了)*/
 8         .center1{
 9             border: 3px solid red;
10             padding:100px 0;     /*上下100px，左右0*/
11             text-align: center;
12         }
13         /*组合选择器*/
14         .center1 p{
15             text-align: center;
16         }
17 
18 
19         /*
20         垂直居中对齐实现方式二:line-height等于元素的height,这样已经贴近居中了，还没有完全居中,
21         还需要结合下方的【.center2 p】组合选择器中的 display:inline-block  和 line-height:1 才能实现全部居中
22         */
23         .center2{
24             border: 3px solid red;
25             height: 200px;
26             line-height: 200px;
27             text-align: center;
28         }
29 
30         .center2 p{
31             text-align: center;
32             line-height: 1;
33             display:inline-block;
34         }
35 
36         /*垂直居中对齐实现方式三:position*/
37         .center3{
38             border:3px solid red;
39             height:200px;
40             text-align: center;
41             position: relative;
42         }
43 
44         .center3 p{
45             text-align: center;
46             position: absolute;
47             margin: 0;
48             top: 50%;
49             left: 50%;
50             transform: translate(-50%,-50%);    /*微调x,y轴方向,第一个-50%表示x轴往左移，第二个50%表示y轴往上移*/
51         }
52     </style>
53 </head>
54 <body>
55     <h1>vertically align</h1>
56     <div class="center3">
57         <p>段落的内容，希望它垂直居中</p>
58     </div>
59 </body>
60 </html>

View Code