html 各种居中,HTML--元素居中各种处理方法

如果你想让多个块元素在一行当中显示，首先你得设置display的属性，inline-block;在使用上面说的方法。还有一种方式是设置display:flex;justify-content: center;

CSS代码：

1 body{

2 background:#f06d06;

3 font-size:80%;

4 }

5

6 main{

7 white;

8 margin:20px 0;

9 padding:10px;

10 }

11

12 main div{

13 black;

14 color:15 15px;

16 max-width:125px;

17 5px;

18 }

19

20 .inline-block-center{

21 text-align:center;

22 }

23 .inline-block-center div{

24 display:inline-block;

25 left;

26 }

27

28 .flex-center{

29 flex;

30 justify-content:31 }

View Code

main>

="flex-center">

2、垂直居中

1)如果只是单行的情况：让行高等于元素的高度来欺骗别人达到居中的目的。

I'm a centered line.>

View Code

body{background:#f06d06;font-size:80%;

}main{white;20px 0;padding:40px;

}main div{black;color:height:100px;line-height:20px;width:50%;white-space:nowrap;

}

View Code

white-space: nowrap;表示段落中的文本不换行；超出宽度的将不会在显示。

2)如果要多行居中，一般设置上下的内边距来实现，不行的话还有两种方法：一种是将文本放置在表格单中。另一种则是模仿表格的形式。首先为其设置一个容器，再将装有文本的容器放在里面。设置边框，对齐方式，显示方式等就可以了。

4 I'm vertically centered multiple lines of text in a real table cell.5

8

9

10

I'm vertically centered multiple lines of text in a css-created table layout.

11

12

13 16 }

17

18 table{

19 20 width:240px;

border-collapse:separate;

22 20px;

23 height:250px;

24 }

25

26 table td{

27 28 border:10px solid white;

31 /*default is vertical-align: middle;*/

32 }

33

34 .center-table{

35 table;

36 37 38 39 40 }

41 .center-table p{

42 table-cell;

43 0;

44 45 46 47 48 vertical-align:middle;

49 }

View Code

border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是象在标准的 HTML 中那样分开显示；

display:table- cell属性指让标签元素以表格单元格的形式呈现，类似于td标签。目前IE8+以及其他现代浏览器都是支持此属性的，但是IE6/7只能对你说 sorry了。

如果上述方法都不行，恐怕就得使用flex了

I'm vertically centered multiple lines of text in a flexBox container.

4

6 8 }

9

div{

11 12 14 }

15

16 18 flex-direction:column;

200px;

resize:vertical;

overflow:auto;

27 .flex-center p{

30 }

View Code

如果这个也行不通的话，使用下面的ghost-center.

I'm vertically centered multiple lines of text in a container. Centered with a ghost pseudo element

9 }

10

20 }

21

22 .ghost-center{

position:relative;

25 .ghost-center::before{

26 content:" ";

100%;

1%;

31 }

32 .ghost-center p{

33 34 190px;

39 }

View Code

总结

以上是编程之家为你收集整理的HTML--元素居中各种处理方法全部内容，希望文章能够帮你解决HTML--元素居中各种处理方法所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。