CODEWITHSUNDEEP
htmlcss
Sharpevil
Sharpevil

Reputation: 194

My buttons won't center

For some reason, the buttons on the page I'm working on won't center.

Here's what I've got for 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;
};

I dunno. It seems to work on other people's stuff. I'm sure it'll become clear once it's explained what I'm doing wrong.

Upvotes: 3

Views: 1591

Answers (2)

Rajender Joshi
Rajender Joshi

Reputation: 4205

You've incorrect CSS. You don't need to terminate CSS with semi-colon(;).

Use this. Demo

body {
    background-color: black;
    }

.button {
    text-align: center;
}

Upvotes: 3

Mathijs Flietstra
Mathijs Flietstra

Reputation: 12974

Try:

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

Currently you are setting the buttons to center the text inside of them, when you change it to the above, you are ensuring that elements on the page will be centered.

Upvotes: 2

Related Questions