老师问个问题关于text-align;

关于text-align他对于那些元素能够起作用啊。他能使块级元素p居中显示，又不能使块级元素div居中显示。

那些元素使用它能够生效了？

功不唐捐终入海 2020-05-17

源自：实战：楼层模块组件化 5-4 自由编程

收起

2回答

好帮手慕粉回答被采纳获得+3积分 2020-05-18 09:39:06

同学你好，图片也是行内元素呢，text-align:center可以使行内或者行内块实现居中显示。

祝学习愉快~

收起回答

好帮手慕粉 2020-05-17 18:04:28

同学你好，关于同学的问题回答如下：

1、text-align:center可以使文本实现居中显示，不管是块级元素还是行内元素：

<!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;
        }
        .one {
            width: 200px;
            height: 200px;
            background-color: red;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="one">
        <div class="two">我是居中的文字</div>
        <span>我是居中的文字</span>
    </div>
</body>
</html>

2、父元素设置text-align:center，如果子元素是行内块或者行内元素时，会实现居中显示：

<!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;
        }
        .one {
            width: 400px;
            height: 400px;
            background-color: red;
            text-align: center;
        }
        .two {
            display: inline-block;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="one">
        <div class="two">我是居中的文字</div>
    </div>
</body>

</html>