Question

我正试图将div中的元素居中。这是一个example：

我为数字输入创建了一个包装器，并试图在它们上应用text-center属性，但它不起作用。我还将显示更改为阻止，但这也无法解决。我错过了什么？

<!doctype html>
<html>
<head>
    <title>Learning Ajax</title>

    <meta charset="utf-8" />
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />  

    <script type="text/javascript" src="http://code.jquery.com/jquery-1.11.2.min.js">  </script>

    <!-- Or source it to http://code.jquery.com/jquery-1.11.2.min.js
         This will be faster as jquery website will be faster than mine. -->


    <style type="text/css">

        h1,h2
        {
            text-align:center;
        }

        .num1,.num2
        {
            text-align:center;
        }

        .inputs
        {
            text-align:center;
            display:block;
        }


    </style>
</head>

<body>

    <div id="container">

        <h1>Calculator</h1>

        <h2>Enter two numbers and select an operation</h2>

        <div id="inputs">

            <input id="num1">Number 1</input>

            <input id="num2">Number 2</input>

        </div>

    </div>


</body>

</html>

Answer 1

尝试给你的#inputs宽度并将左/右边距设置为自动。

#inputs {
    width: 50%;
    margin: 0 auto;
}

无法将div中的输入元素居中

1 个答案: