homepage Welcome to WebmasterWorld Guest from 54.198.224.121
register, free tools, login, search, subscribe, help, library, announcements, recent posts, open posts,
Accredited PayPal World Seller

Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: DrDoc

CSS Forum

    
How to center CSS buttons?
CSS buttons alignment
davidpbrown




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

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




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

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

davidpbrown




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

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




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

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




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

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




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

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




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

Thanks - that's it.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
© Webmaster World 1996-2014 all rights reserved