HTML--元素居中各种处理⽅法
1、⽔平居中
对于⾏内元素可以使⽤：
.center-children {
text-align: center;
}
对于块元素，你可以设置其左右外边距为：auto；同时你还应该设置该元素的宽度，不然的话，元素的宽度会撑满整个浏览器或者⼀种是没反应（不过你设置背景就会看到了）。
.center-me {
margin: 0 auto;
}
如果你想让多个块元素在⼀⾏当中显⽰，⾸先你得设置display的属性，inline-block；在使⽤上⾯说的⽅法。还有⼀种⽅式是设置di splay:flex;justify-content: center;
CSS代码：
1body {
2 background: #f06d06;
3 font-size: 80%;
4 }
5
6main {
7 background: white;
8 margin: 20px 0;
9 padding: 10px;
10 }
11
12main div {
13 background: black;
14 color: white;
15 padding: 15px;
16 max-width: 125px;
17 margin: 5px;
18 }
19
20.inline-block-center {
21 text-align: center;
22 }
23.inline-block-center div {
24 display: inline-block;
25 text-align: left;
26 }
27
28.flex-center {
29 display: flex;
30 justify-content: center;
31 }
View Code
HTML代码：
<main class="inline-block-center">
<div>
I'm an element that is block-like with my siblings and we're centered in a row.
</div>
<div>
I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
</div>
<div>
I'm an element that is block-like with my siblings and we're centered in a row.
</div>
</main>
<main class="flex-center">
<div>
I'm an element that is block-like with my siblings and we're centered in a row.
</div>
<div>
I'm an element that is block-like with my siblings and we're centered in a row. I have more content in me than my siblings do.
</div>
<div>
I'm an element that is block-like with my siblings and we're centered in a row.html怎么让所有内容居中
</div>
</main>
2、垂直居中
1）如果只是单⾏的情况：让⾏⾼等于元素的⾼度来欺骗别⼈达到居中的⽬的。
<main>
<div>
I'm a centered line.
</div>
</main>
View Code
body {
background: #f06d06;
font-size: 80%;
}
main {
background: white;
margin: 20px 0;
padding: 40px;
}
main div {
background: black;
color: white;
height: 100px;
line-height: 100px;
padding: 20px;
width: 50%;
white-space: nowrap;
}
View Code
white-space: nowrap；表⽰段落中的⽂本不换⾏；超出宽度的将不会在显⽰。
2）如果要多⾏居中，⼀般设置上下的内边距来实现，不⾏的话还有两种⽅法：⼀种是将⽂本放置在表格单中。另⼀种则是模仿表格的形式。⾸先为其设置⼀个容器，再将装有⽂本的容器放在⾥⾯。设置边框，对齐⽅式，显⽰⽅式等就可以了。
1<table>
2 <tr>
3 <td>
4 I'm vertically centered multiple lines of text in a real table cell.
5 </td>
6 </tr>
7</table>
8
9<div class="center-table">
10 <p>I'm vertically centered multiple lines of text in a CSS-created table layout.</p>
11</div>
12
13body {
14 background: #f06d06;
15 font-size: 80%;
16 }
17
18table {
19 background: white;
20 width: 240px;
21 border-collapse: separate;
22 margin: 20px;
23 height: 250px;
24 }
25
30 border: 10px solid white;
31/* default is vertical-align: middle; */
32 }
33
<-table {
35 display: table;
36 height: 250px;
37 background: white;
38 width: 240px;
39 margin: 20px;
40 }
<-table p {
42 display: table-cell;
43 margin: 0;
44 background: black;
45 color: white;
46 padding: 20px;
47 border: 10px solid white;
48 vertical-align: middle;
49 }
View Code
border-collapse 属性设置表格的边框是否被合并为⼀个单⼀的边框，还是象在标准的 HTML 中那样分开显⽰；
display:table- cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。⽬前IE8+以及其他现代浏览器都是⽀持此属性的，但是IE6/7只能对你说 sorry了。
如果上述⽅法都不⾏，恐怕就得使⽤flex了
1<div class="flex-center">
2 <p>I'm vertically centered multiple lines of text in a flexbox container.</p>
3</div>
4
5body {
6 background: #f06d06;
7 font-size: 80%;
8 }
9
10div {
11 background: white;
12 width: 240px;
13 margin: 20px;
14 }
15
16.flex-center {
17 background: black;
18 color: white;
19 border: 10px solid white;
20 display: flex;
21 flex-direction: column;
22 justify-content: center;
23 height: 200px;
24 resize: vertical;
25 overflow: auto;
26 }
27.flex-center p {
28 margin: 0;
29 padding: 20px;
30 }
View Code
如果这个也⾏不通的话，使⽤下⾯的ghost-center.
1<div class="ghost-center">
2 <p>I'm vertically centered multiple lines of text in a container. Centered with a ghost pseudo element</p>
3</div>
4
5
6body {
7 background: #f06d06;
8 font-size: 80%;
9 }
10
15 margin: 20px;
16 color: white;
17 resize: vertical;
18 overflow: auto;
19 padding: 20px;
20 }
21
22.ghost-center {
23 position: relative;
24 }
25.ghost-center::before {
26 content: " ";
27 display: inline-block;
28 height: 100%;
29 width: 1%;
30 vertical-align: middle;
31 }
32.ghost-center p {
33 display: inline-block;
34 vertical-align: middle;
35 width: 190px;
36 margin: 0;
37 padding: 20px;
38 background: black;
39 }
View Code
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论