网站首页编程语言正文

如何让css文本元素居中

作者：翼遥bingo 更新时间： 2022-07-10 编程语言

文本元素如何居中
未知高度元素水平居中、垂直居中的实现方式

文章目录

- - - 1-1 水平居中：text-align:center
    - 1-2 垂直居中：
    - - 1-2-1 单行文本：line-height
      - 1-2-2 多行文本垂直居中

1-1 水平居中：text-align:center

该属性设置文本和img标签等一些内联对象（或与之类似的元素）的居中。

1、特点：

text-align的center应用在一个容器上，它只针对容器里面的文字以及容器里面的display为inline或者inline-block的容器，如果里面的容器display为block，则里面的容器的内容不会居中。
text-align具有向下传递性，会不断地向子元素传递。如果设置一个div，则其子div中的内容也会居中。

2、例子

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>css 水平居中</title>
    <style>
        .box {
            width: 400px;
            height: 100px;
            background: pink;
            text-align: center;
        }
    </style>
</head>

<body>
    <div class="box">css 水平居中了--文本文字</div>
</body>

</html>

在这里插入图片描述

1-2 垂直居中：

1-2-1 单行文本：line-height

1、对于单行文本，我们只需要将文本行高(line-height属性)和所在区域高度(height)设置一致就可以了

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css 垂直居中</title>
        <style>
            .box {
                width: 300px;
                height: 300px;
                background: paleturquoise;
                line-height:300px;
            }
        </style>
    </head>
    <body>
        <div class="box">css 垂直居中了--文本文字</div>
    </body>
</html>

1-2-2 多行文本垂直居中

1、父级元素高度不固定

父级高度不固定的时，高度只能通过内部文本来撑开。所以，我们可以通过设置内填充（padding）的值来使文本看起来垂直居中，只需设置padding-top和padding-bottom的值相等：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>css 垂直居中</title>
        <style>
            .box {
                width: 300px;
                margin: 50px auto;
                background: paleturquoise;
                padding: 50px 20px;
            }
        </style>
    </head>
    <body>
        <div class="box">css 垂直居中了--文本文字,文本文字,文本文字,文本文字,文本文字,文本文字</div>
    </body>
</html>

2、父级元素高度固定

vertical-align:middle + displsy:table-cell 使文字垂直居中

<!-- 父级元素高度固定 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>父级元素高度固定</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: red;
            display: table-cell;
            vertical-align: middle;
        }
    </style>
</head>

<body>
    <div class="box">css 垂直居中了--文本文字,文本文字,文本文字,文本文字,文本文字,文本文字。</div>
</body>

</html>

在这里插入图片描述

vertical-align:middle + displsy:table-cell 使单行文字、多行文字都居中
因为table-cell是inline类型，所以会导致原来的块级元素每个div一行移动到了同一行
需要分列两行，需要外面额外添加容器对位置进行控制

原文链接：https://blog.csdn.net/hannah2233/article/details/125664374

上一篇：网络I/o编程模型23 netty的出站与入站中handle
下一篇：css盒子塌陷及其解决方法

网站首页 编程语言 正文

如何让css文本元素居中

文章目录

1-1 水平居中：text-align:center

1-2 垂直居中：

1-2-1 单行文本：line-height

1-2-2 多行文本垂直居中

相关推荐

网站首页编程语言正文