Reputation: 194
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
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
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