CODEWITHSUNDEEP
htmlcssradio-button
B.T
B.T

Reputation: 551

HTML/CSS Horizontally align Radio and Images labels

I try to align horizontally my images with my radio boxes :

Here is the code i'm using :

<div class="radio46">
<input type="radio" name="colors" value="J"> <img class="couleur" src="Img.jpg" width="20" height="20" border="0" alt="Jaune">
<input type="radio" name="colors" value="V"> <img class="couleur" src="Img2.jpg" width="20" height="20" border="0" alt="Vert">
</div>

And the CSS applied to it : 

.radio46{
font-size: 15px;
opacity: 0.5;
text-align: center;
margin: auto;
line-height:15px;
}

However, i can't figure out how to fix it.

May you please help me ?

Upvotes: 0

Views: 956

Answers (3)

azeem
azeem

Reputation: 1

.radio46 * 
{
    vertical-align: middle;                
}

You can see it working when the height of image is relatively bigger.

Upvotes: 0

Mimetix
Mimetix

Reputation: 272

You can center it using Flexbox

.radio46 {
    opacity: 0.5;
    display: flex;
    align-items: center;
}

Or the traditional way

.radio46 {
    opacity: 0.5;   
}
input, img {
    vertical-align: middle;
    display: inline-block;
}

Fiddle

Upvotes: 1

Rachel Gallen
Rachel Gallen

Reputation: 28553

add the following to your css

input, img{display:inline;
vertical-align:middle;}

Output

Upvotes: 2

Related Questions