Welcome to WebmasterWorld Guest from 54.234.63.187

Forum Moderators: not2easy

Message Too Old, No Replies

How to center CSS buttons?

CSS buttons alignment

     

davidpbrown

12:12 pm on Dec 7, 2009 (gmt 0)

10+ Year Member



I'm unfamiliar with the detail of CSS buttons but have something close to useful, with this code below.

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>

StoutFiles

2:06 pm on Dec 7, 2009 (gmt 0)

WebmasterWorld Senior Member 5+ Year Member



You might as well use the <center></center> tags if you're going to use a table.

davidpbrown

2:18 pm on Dec 7, 2009 (gmt 0)

10+ Year Member



Yes, I'm aware table isn't ideal but then this is just an element for inserting in an unstable template and so I wondered forcing it with table might be easier than place setting.

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.

swa66

2:40 pm on Dec 7, 2009 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Your efforts at centering will be moot as long as you keep "float:left" in there.

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.

davidpbrown

3:23 pm on Dec 7, 2009 (gmt 0)

10+ Year Member



Yes, it's a bad hack of something simple found online..

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>

swa66

6:15 pm on Dec 7, 2009 (gmt 0)

WebmasterWorld Senior Member swa66 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Try display:inline-block for your intentional line wrapping inside these links.

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]

davidpbrown

8:44 pm on Dec 7, 2009 (gmt 0)

10+ Year Member



Thanks - that's it.
 

Featured Threads

Hot Threads This Week

Hot Threads This Month