Forum Moderators: not2easy
Is it possible to tweak this to then have each button align centre of the cell, and retaining their current size that reflects the width of the text?
<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>
Feeling like a noob but I can't get this to work in anyway that doesn't also make the button cell-width wide. Looking for text-width wide, centred in the table cell.
I'm not sure I understand why you set the display to block either (I'd leave it inline).
The clear is even more confusing, but probably to counteract the floats somehow.
Anyway: just keep fonts, borders, padding and text decoration settings and the link will obey a parent's text-align settings (these are inherited, no need to specify them all over the place.
So, now a step forward, I have centred buttons but then an odd effect (in Firefox at least) of buttons with a line break, formed badly as half buttons and missing one side of their border, instead of the obvious single button wrap!?
<html>
<head>
<style type="text/css" media="all">
td {text-align: center}
a.css_button_1 {
align: middle;
display:inline;
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><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>
It needs tripping back to inline in IE. See this great post by SuzyUK:
[webmasterworld.com...]
[edited by: swa66 at 9:41 pm (utc) on Dec. 7, 2009]
