css3 - 让文字位于div元素正中央

最新推荐文章于 2023-01-02 14:59:08 发布

erdouzhang

最新推荐文章于 2023-01-02 14:59:08 发布

阅读量2w

点赞数 7

分类专栏： css3

本文链接：https://blog.csdn.net/erdouzhang/article/details/71110316

版权

css3 专栏收录该内容

35 篇文章 0 订阅

订阅专栏

使用盒布局的时候，可以使用box-pack属性及box-align属性来指定元素中文字、图像及子元素水平方向或垂直方向的对齐方式。使用Firefox浏览器中，需要使用-moz-box-pack、-moz-box-align的形式；在Safari、Chrom浏览器中，需要使用-webkit-box-pack、-webkit-box-align的形式。

在使用CSS 1.0或CSS 2.0的时候，在div元素内部直接放置文字的场合下，如果想让文字垂直居中，直接使用text-align属性就可以了，但若要让文字垂直居中，由于div元素是不能使用vertical-align属性的，所以就很难做到了。在CSS 3中，只要让div元素使用box-align属性（排列方向默认为horizontal）,文字就可以垂直居中了。

如图，有一个div元素，元素中有一些文字，使用box-pack属性及box-align属性让文字位于div元素正中央；

这里写图片描述

html：

<div>示例文字</div>

css：

div {
      display: -moz-box;/*兼容Firefox*/
      display: -webkit-box;/*兼容FSafari、Chrome*/

      -moz-box-align: center;/*兼容Firefox*/
      -webkit-box-align: center;/*兼容FSafari、Chrome */

      -moz-box-pack: center;/*兼容Firefox*/
      -webkit-box-pack: center;/*兼容FSafari、Chrome */

      width: 300px;
      height: 200px;
      background-color: pink;
}

解析：
box-pack属性及box-align属性的属性值及其含义

属性值	排列方向	box-pack属性值的含义	box-align属性值的含义
start	horizontal	左对齐，文字、图像或子元素被放置在元素最左边	顶部对齐，文字、图像或子元素被放置在元素最顶部
center	horizontal	中对齐，文字、图像或子元素被放置在元素中部	中部对齐，文字、图像或子元素被放置在元素中部
end	horizontal	右对齐，文字、图像或子元素被放置在元素最右边	底部对齐，文字、图像或子元素被放置在元素最底部
start	vertical	顶部对齐，文字、图像或子元素被放置在元素最顶部	左对齐，文字、图像或子元素被放置在元素最左边
center	vertical	中部对齐，文字、图像或子元素被放置在元素中部	中对齐，文字、图像或子元素被放置在元素中部
end	vertical	底部对齐，文字、图像或子元素被放置在元素最底部	右对齐，文字、图像或子元素被放置在元素最右边