Radio alignment with image

Question

I’m trying to center a radio item - a selection "ball" with an image.

But I’ve tried several resources using CSS and I’m not getting it.

You know what feature I can use to achieve this alignment?

				<tr>
					<!-- #### BUG: Arrumar alinhamento entre a bolinha e a imagem. -->
					<td>Bandeira:</td>
					<td>
						<div class="celula-imagens">
							<input type="radio" name="bandeira"><img src="img/visa-logo.png">
						</div> 
						<div class="celula-imagens">
							<input type="radio" name="bandeira"><img src="img/mastercard-logo.png">
						</div>
						<div class="celula-imagens">
							<input type="radio" name="bandeira"><img src="img/american-express-logo.png">
						</div>
					</td>
				</tr>

Answer 1

You can use the style vertical-align us radios and in imagens:

input[name='bandeira']{
   vertical-align: sub;
}

.celula-imagens img{
   vertical-align: middle;
}

<table border="1">
   <tr>
      <!-- #### BUG: Arrumar alinhamento entre a bolinha e a imagem. -->
      <td>Bandeira:</td>
      <td>
         <div class="celula-imagens">
            <input type="radio" name="bandeira"><img height="20" src="https://logodownload.org/wp-content/uploads/2016/10/visa-logo.png">
         </div> 
         <div class="celula-imagens">
            <input type="radio" name="bandeira"><img height="40" src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/MasterCard_Logo.svg/2000px-MasterCard_Logo.svg.png">
         </div>
         <div class="celula-imagens">
            <input type="radio" name="bandeira"><img height="40" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/30/American_Express_logo.svg/2000px-American_Express_logo.svg.png">
         </div>
      </td>
   </tr>
</table>

Answer 2

I made an option with transform:translateY that can serve you. It works even on IE9 and all modern browsers.

I didn’t have to touch anything in your code, I just added some classes like you can see below. Another detail is that it will always align vertically regardless of image size!

div {
    position: relative;
}
div > input{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
}
div > img{
    padding-left: 20px;
}

<table>
    <tr>
        <!-- #### BUG: Arrumar alinhamento entre a bolinha e a imagem. -->
        <td>Bandeira:</td>
        <td>
            <div class="celula-imagens">
                <input type="radio" name="bandeira">
                <img src="http://placecage.com/50/50">
            </div>
            <div class="celula-imagens">
                <input type="radio" name="bandeira">
                <img src="http://placecage.com/70/70">
            </div>
            <div class="celula-imagens">
                <input type="radio" name="bandeira">
                <img src="http://placecage.com/100/100">
            </div>
        </td>
    </tr>
</table>

Answer 3

Depending on the backward compatibility your project needs to achieve (until which old browsers it needs to support), you can solve with display: flex. You can check which browsers support on caniuse with.. (Thank you Ricardo Punctual for signaling this).

Then just apply this code to your style sheet that solves:

.celula-imagens {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap
}

.celula-imagens input {
    -webkit-align-self: center;
    -ms-flex-item-align: center;
    -ms-grid-row-align: center;
    align-self: center
}

You define the div that selects these elements as display: flex and can manipulate the horizontal alignment of its elements