Moving content to center

aaronoafc

02-17-2012, 11:12 AM

This never sticks for some reason! Could someone please tell me what to write in the CSS to get the three "buttons" into the centre of the page?

html

<!doctype html>
<head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<a href="#" class="button green">Button</a>

<a href="#" class="button blue">Button</a>

<a href="#" class="button grey">Button</a>

</body>
</html>

CSS
body {
margin-right:auto;
margin-left:auto;
}

abduraooft

02-17-2012, 11:41 AM

Anchors are inline elements. Set text-align:center; to body.

qeemat

02-20-2012, 10:52 AM

<html>
<head>
<style type="text/css" media="all">
td {text-align: center}
p {text-align: center}
a.css_button_1 {
clear:both;
display:block;
float:left;
padding:5px;
margin:0 10px 10px 0;
background:#CCCCFF;
border:1px solid #408000;
text-decoration:none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size:11px;
line-height:16px;
text-align:center;
color:#000000;
}
a.css_button_1:hover {
color:#FFFFFF;
background:#6666CC;
}
</style>
</head>
<body>
<table border="1" width="30%">
<tr><td><p><a href="somelink" class="css_button_1" style="clear:none;">button1<br />how to centre?</a></p></td>
<td><p><a href="somelink" class="css_button_1" style="clear:none;">button2<br />centre me</a></p></td></tr>
<tr><td><p><a href="somelink" class="css_button_1" style="clear:none;">button3 centre me</a></p></td>
<td><p><a href="somelink" class="css_button_1" style="clear:none;">button4</a></p></td></tr>
</table>
</body>
</html>