web前端字体居中_css怎样使⽂字居中？
在CSS中，可以使⽤text-align属性来使⽂字⽔平居中；使⽤line-height属性来使单⾏⽂字垂直居中、使⽤vertical-align:middle
+display:table-cell使多⾏⽂字垂直居中。下⾯本篇⽂章就来给⼤家介绍⼀下。
1、使⽤text-align属性来使⽂字⽔平居中
text-align属性规定元素中的⽂本的⽔平对齐⽅式，通过使⽤center值设置⽂本居中。
text-align是⼀个基本的属性，它会影响⼀个元素中的⽂本⾏互相间的对齐⽅式。值left、right和center会导致元素中的⽂本分别左对齐、右对齐和居中，想要使⽂本居中，直接使⽤center即可。
该属性设置⽂本和img标签等⼀些内联对象(或与之类似的元素)的居中。
该属性有如下⼏个特点：
1)、text-align的center应⽤在⼀个容器上，它只针对容器⾥⾯的⽂字以及容器⾥⾯的display为inline或者inline-block的容器，如果⾥⾯的容器display为block，则⾥⾯的容器的内容不会居中。
2)、text-align具有向下传递性，会不断地向⼦元素传递。如果设置⼀个div，则其⼦div中的内容也会居中。
css ⽔平居中
.box {
width: 400px;
height: 100px;
background: pink;
text-align:center;
}
css ⽔平居中了--⽂本⽂字
效果图：
2、使⽤line-height属性来使单⾏⽂字垂直居中
line-height 属性设置⾏间的距离(⾏⾼)。不允许使⽤负值。
该属性会影响⾏框的布局。在应⽤到⼀个块级元素时，它定义了该元素中基线之间的最⼩距离⽽不是最⼤距离。
css 垂直居中
.box {
width: 300px;
height: 300px;
background: paleturquoise;
line-height:300px;
}
css 垂直居中了--⽂本⽂字
效果图：
3、使⽤vertical-align:middle +display:table-cell使多⾏⽂字垂直居中
css 垂直居中
.box {
text align centerwidth: 300px;
height: 300px;
background: paleturquoise;
vertical-align:middle;
display:table-cell;
}
css 垂直居中了--⽂本⽂字,⽂本⽂字,⽂本⽂字,⽂本⽂字,⽂本⽂字,⽂本⽂字。
效果图：
说明：vertical-align:middle +display:table-cell能够使单⾏⽂字、多⾏⽂字都居中。但是因为 table-cell 是 inline 类型，所以会导致原来的块级元素每个 div ⼀⾏移动到了同⼀⾏。如果需要分列两⾏，需要在外⾯额外添加容器对位置进⾏控制。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。