text-align:center+inlineblock 无效

来源:2-3 水平居中布局的第一种解决方案

慕虎1020439

2020-05-17 20:42

vscode里面用text-align:center+inlineblock 无效,代码如下,请问可以帮我看下问题在哪吗?

<!DOCTYPE html>

<html lang="en">


<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>水平居中的布局方案1</title>

    <style>

        #parent {

            border: 1px solid red;

            border-radius: 0.5em;

            width: 200px;

            height: 200px; text-align: center;

        }


        #child {

            background-color: yellow;

            width: 50px;

            height: 50px;

            display: inline-block;

        }

    </style>

</head>


<body>

    <!-- 1.text-align center+inline block实现 -->

    <div id="parent">

        <div id="child"> 123

        </div>

    </div>

</body>


</html>


写回答 关注

1回答

  • 995台阶
    2020-05-19 10:59:16

    我复制过来后,看到你的 #parent 的 height:200px后面的分号是错误的,改成英文的分号就好了。

一课全面掌握主流CSS布局

一网打尽CSS主流布局方案,一步掌握页面布局技巧.

5276 学习 · 60 问题

查看课程

相似问题