Centering Radio Button in Table Column

HTML & CSS
1

What is the easiest and best way to horizontally center a Radio Button nested inside of a Table Column/Cell?

Here is a code snippet…


<tr>
	<td class='colSubscribe'>
		<input id='Subscription38_1' name='subscriptionStatus[38]' type='radio' value='1' checked='checked' />
	</td>
	<td class='colUnsubscribe'>
		<input id='Subscription38_2' name='subscriptionStatus[38]' type='radio' value='2'  />
	</td>
</tr>


#subscriptions #colSubscribe,
#subscriptions #colUnsubscribe{
	width: 100px;
	padding: 4px 0 2px 0;
	text-align: center;
}

Here is a screenshot of my Manage Subscriptions form…

I am trying to pretty things up, and would like all of the Radio Buttons centered in their respective columns. (It would also be nice to horizontally center the thumbnails in a similar way.)

Any help is welcome.

Thanks,

Debbie

P.S. I tried using “auto” with my padding, but apparently that only works on margins?! :-/

2

Oh dear, you’ve made a right hash of that, you’ll give yourself such a pounding when you spot what you’ve done wrong…
:lol:

3

mmmm I love hash browns with a spot of brown sauce

4

Yes, it’s a classic mistake that is easy to make. Looks like the markup has no idea why your css isn’t working.

5

Were you trying to give me a HINT??? :stuck_out_tongue:

Debbie

6

Yeah, pretty dumb mistake. :blush:

Okay, so what about centering my Image in the Table Cell?

I can’t use…

	text-align: center;

I tried this but it isn’t working…


<tr>
	<td class='colSubscribe'>
		<input id='Subscription38_1' name='subscriptionStatus[38]' type='radio' value='1' checked='checked' />
	</td>
	<td class='colUnsubscribe'>
		<input id='Subscription38_2' name='subscriptionStatus[38]' type='radio' value='2'  />
	</td>
	<td class='colThumbnail'><img class="noborder" src="/images/PostageMeter.png" width="50" /></td>
	<td class='colArticleThread'>Postage Meters Can Save You Money</td>
</tr>


#subscriptions td.colThumbnail img{
	margin: 0 auto 0 auto;
}

Probably another newbie question, but my brain is tired after a long week… sigh

Debbie

7

It looks like you have to make sure the Image is set as display: block…

Debbie

8

^ That’s right, auto (and vertical) margins only apply to block level elements.

Of course a width must be set for auto margins to work, even if you had not set a width on the img it would have worked because it has intrinsic dimensions.

I can’t use… text-align: center;

Why not? If you had of left the img as an inline element it would have centered with text-align: center; applied to the parent.

Either way will work, but just remember images are inline elements by default.