细谈text-align: center

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;
        }

在这里插入图片描述

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