CODEWITHSUNDEEP
css
overexchange
overexchange

Reputation: 1

How to align image with radio button?

I have 3 images of mXn pixels(approx), but on rendering, the image size increase due to zoom-in issue, as shown below:

enter image description here

Below is the html code,

<div class="cardtype">
                <label>Cardtype:</label>
                <input type="radio" name="cardtype" value="visa"><img src="visa.png"> VISA
                <input type="radio" name="cardtype" value="amex"><img src="amex.png"> AMEX
                <input type="radio" name="cardtype" value="mastercard"><img src="mastercard.png"> Master card
</div>

Below is the CSS code,

.cardtype input{
                width: 8%;
            }
.cardtype img{
                width: 8%;
            }

How do I align img and input radio button horizontally?

Is this something to do with image size? How do I decide the image size?

Is this something to do with image resolution? How do I decide the image resolution?

Upvotes: 0

Views: 1860

Answers (4)

BrendanMullins
BrendanMullins

Reputation: 587

Here is how you do it. This will work for any image size.

Add the span around the image to help position it I gave it the class helper, you will also need to add a bit of css.

add this css:

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    width: 8%;
}
.helper img {
    vertical-align: middle;
    max-height: 25px;
}

try it here: http://jsfiddle.net/kLbvh139/

Upvotes: 0

z1m.in
z1m.in

Reputation: 1661

http://www.bootply.com/pYw1JhTXOW

Try to set size to image wrappers, not to images directly.

Upvotes: 1

Lu&#237;s P. A.
Lu&#237;s P. A.

Reputation: 9739

Try this out (use vertical-align):

CSS

.cardtype img{
    width: 8%;
    vertical-align: middle;
}

DEMO HERE

Upvotes: 0

Harsh Sanghani
Harsh Sanghani

Reputation: 1712

You can take radio button in label and make some padding to that image within label, for example :-

<div class="cardtype">
    <label>Cardtype:</label>
    <label class="radio">
        <input type="radio" name="cardtype" value="visa"><img src="visa.png"> VISA
    </label>
    <label class="radio">
        <input type="radio" name="cardtype" value="amex"><img src="amex.png"> AMEX
    </label>
    <label class="radio">
        <input type="radio" name="cardtype" value="mastercard"><img src="mastercard.png"> Master card
    </label>
</div>

Now do some css for that image :-

.radio img{
   padding-top : 5px; //take as per your img these just for example
}

Upvotes: 0

Related Questions