细谈text-align: center

最新推荐文章于 2024-07-18 15:49:58 发布

AGG_Chan

最新推荐文章于 2024-07-18 15:49:58 发布

阅读量1.7w

点赞数 23

分类专栏： CSS HTML 前端文章标签： css css3 html html5

本文链接：https://blog.csdn.net/qq_44742090/article/details/110205574

版权

前端同时被 3 个专栏收录

22 篇文章 1 订阅

订阅专栏

CSS

6 篇文章 0 订阅

订阅专栏

HTML

5 篇文章 0 订阅

订阅专栏

text-align: center的几个用处

1.概括

CSS参考手册上关于text-align:center的说明是:text-align 属性规定元素中的文本的水平对齐方式。该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。cneter参数让把文本排列到中间。单纯地看这句话你可以知道该属性可以让文本居中显示，但是除此之外，该属性还可以让父元素为块元素的行内元素或行内块元素居中显示。

2.用法

1.块级元素下使用text-align: center，使得其文本内容居中对齐

    <div class="parent">
        <!-- 1.块级元素下使用text-align: center，使得其文本内容居中对齐 -->
        123
    </div>

效果：
效果图

2.块级元素下使用text-align: center，使得包含在其中的行内元素或行内块元素居中对齐

    <div class="parent">
        <!-- 2.块级元素下使用text-align: center，使得包含在其中的行内元素或行内块元素居中对齐 -->
        <strong>行内元素</strong>
    </div>
    <div class="parent">
        <!-- 2.块级元素下使用text-align: center，使得包含在其中的行内元素或行内块元素居中对齐 -->
        <em>行内元素转行内块元素</em>
    </div>

其中这里的a元素已经通过CSS转化为行内块元素
效果：
在这里插入图片描述

3.块级元素下使用text-align: center，包含在其中的块级元素不能居中对齐，
但是这个子代块级元素p会继承text-align: center，使得p的文本内容居中对齐

    <div class="parent">
        <!-- 3.块级元素下使用text-align: center，包含在其中的块级元素不能居中对齐，
        但是这个子代块级元素p会继承text-align: center，使得p的文本内容居中对齐-->
        <p>hahaha</p>
    </div>

效果：
在这里插入图片描述

3.详细代码(第4点为注意点)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .parent {
            width: 500px;
            height: 150px;
            text-align: center;
            background-color: pink;
            border-bottom: 1px solid black;
        }
        strong {
            background-color: blue;
        }
        em {
            display: inline-block;
            background-color: blue;
        }
        p {
            width: 200px;
            height: 50px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <!-- 问题1:text-align: center的使用 -->
    <div class="parent">
        <!-- 1.块级元素下使用text-align: center，使得其文本内容居中对齐 -->
        123
    </div>
    <div class="parent">
        <!-- 2.块级元素下使用text-align: center，使得包含在其中的行内元素或行内块元素居中对齐 -->
        <strong>行内元素</strong>
    </div>
    <div class="parent">
        <!-- 2.块级元素下使用text-align: center，使得包含在其中的行内元素或行内块元素居中对齐 -->
        <em>行内元素转行内块元素</em>
    </div>
    <div class="parent">
        <!-- 3.块级元素下使用text-align: center，包含在其中的块级元素不能居中对齐，
        但是这个子代块级元素p会继承text-align: center，使得其文本内容居中对齐-->
        <p>hahaha</p>
    </div>
    </script>
</body>
</html>

4.注意

在CSS代码中若不添加消除内外边距的代码(如下)，块元素内包含块元素会出现显示问题(如图)

        * {
            margin: 0;
            padding: 0;
        }

在这里插入图片描述

加上之后：
在这里插入图片描述

AGG_Chan

关注

23
点赞
踩
77

收藏

觉得还不错? 一键收藏
6
评论
细谈text-align: center

text-align: center的几个用处1.概括CSS参考手册上关于text-align:center的说明是text-align 属性规定元素中的文本的水平对齐方式。该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。...
复制链接

扫一扫

专栏目录