Question

出于某种原因，我正在处理的页面上的按钮不会居中。

以下是我对HTML的看法：

<!DOCTYPE html>
<html>
<head>
    <link type="text/css" rel="stylesheet" href="chaos.css"/>
    <script type="text/javascript" src="jquery-1.10.0.min.js"></script>
    <script type="text/javascript" src="Chaos.js"></script>
    <title>MTG Chaos Roller</title>
</head>
<body>
    <div class="button">
        <input type="submit" value="Roll Chaos">
        <input type="submit" value="Roll EnchantWorldLand">
        <input type="submit" value="Roll PersonaLand">
        <input type="submit" value="Roll WackyLand">
    </div>

</body>
</html>

CSS：

body {
    background-color: black;
    };

.button {
    text-align: center;
};

我不知道。它似乎适用于其他人的东西。一旦它解释了我做错了什么，我相信它会变得清晰。

Answer 1

你的CSS不正确。您不需要使用分号（;）来终止CSS。

使用它。 Demo

body {
    background-color: black;
    }

.button {
    text-align: center;
}

Answer 2

尝试：

body {
  background-color: black;
  text-align: center;
}

目前您正在设置按钮以将文本置于其中心，当您将其更改为上述内容时，您将确保页面上的元素将居中。

我的按钮不会居中

2 个答案: