[分享]css中字体在块的位置居中

在CSS中，设置字体在块中的位置居中是一个常见的需求。下面我们就来介绍如何实现这个功能。/ 使用textalign属性实现水平居中 / div { textalign: center; } p { d...

在CSS中，设置字体在块中的位置居中是一个常见的需求。下面我们就来介绍如何实现这个功能。

/* 使用text-align属性实现水平居中 */
div {
  text-align: center;
}
p {
  display: inline-block;/*或者将块级元素改为行内块级元素*/
}

/* 使用line-height属性实现垂直居中 */
div {
  line-height: 100px;/*设置line-height为容器高度*/
  text-align: center;/*水平居中*/
}
p {
  display: inline-block;/*或者将块级元素改为行内块级元素*/
  vertical-align: middle;/*设置垂直对齐方式为居中*/
} 

通过上面的代码，我们可以发现，实现块内字体的居中并不难。我们可以分别通过text-align和line-height两个CSS属性实现水平和垂直两个方向的居中。