# Expanding CSS Buttons - Centering

**URL:** <https://forum.kirupa.com/t/expanding-css-buttons-centering/256927>\
**Category:** web dev\
**Created:** [April 8, 2008, 9:27pm UTC](https://forum.kirupa.com/t/expanding-css-buttons-centering/256927 "2008-04-08T21:27:57Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![jacjac](https://avatars.discourse-cdn.com/v4/letter/j/8baadc/32.png) [@jacjac](https://forum.kirupa.com/u/jacjac)\
**Post date:** [April 8, 2008, 9:27pm UTC](https://forum.kirupa.com/t/expanding-css-buttons-centering/256927/1 "2008-04-08T21:27:57Z")

</div>

Hi

I am trying to produce some expanding css buttons. This I have done successfully but I am unable to get the button to center within the TD underneath the image.

See [www.barntheatre.co.uk/p7.html](http://www.barntheatre.co.uk/p7.html)

If I take the LEFT FLOAT off, the button does center but also it expands to the full TD space available not to the amount of text in the button itself.

Any ideas?

Thanks

John

This is the set of styles for the Button itself

[FONT=Courier New][INDENT]a.grey\_button {  
height: 20px;  
margin-right: 6px;  
padding-right: 20px; /\* sliding doors padding \*/  
text-decoration: none; background-attachment: scroll;  
background-color: transparent;  
background-image: url(…/\_images/grey\_button.png);  
background-repeat: no-repeat;  
background-position: right top;  
font-family: arial, sans-serif;  
font-size: 11px;  
font-style: normal;  
font-weight: normal;  
font-variant: normal;  
float: left;  
display: block;  
margin-bottom: 10px; }

a.grey\_button:hover {  
color: #FFFFFF;  
background-position: right -20px;  
font-weight: normal;  
text-decoration: none; }

a.grey\_button span {  
display: block;  
line-height: 10px;  
background-image: url(…/\_images/grey\_button\_SPAN.png);  
background-repeat: no-repeat;  
padding-top: 4px;  
padding-right: 10px;  
padding-bottom: 6px;  
padding-left: 18px;  
color: #000000;  
text-decoration: none; }

a.grey\_button:hover span {  
background-color: transparent;  
background-repeat: no-repeat;  
background-position: left -20px;  
text-decoration: none;  
color: #FFFFFF; }[/INDENT][/FONT]

John