SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Centering Radio Button in Table Column

    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...

    HTML Code:
    <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>

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

    Here is a screenshot of my Manage Subscriptions form...

    Attachment 60451


    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. #2
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    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...

  3. #3
    dooby dooby doo silver trophybronze trophy
    spikeZ's Avatar
    Join Date
    Aug 2004
    Location
    Manchester UK
    Posts
    13,806
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    mmmm I love hash browns with a spot of brown sauce
    Mike Swiffin - Community Team Advisor
    Only a woman can read between the lines of a one word answer.....

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    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...

    Were you trying to give me a HINT???


    Debbie

  6. #6
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Yeah, pretty dumb mistake.

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

    I can't use...

    Code:
    	text-align: center;

    I tried this but it isn't working...

    HTML Code:
    <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>

    Code:
    #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. #7
    SitePoint Wizard DoubleDee's Avatar
    Join Date
    Aug 2010
    Location
    Arizona
    Posts
    3,764
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    It looks like you have to make sure the Image is set as display: block...


    Debbie

  8. #8
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    ^ 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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •