Radio alignment with image

Question

Radio alignment with image

Navigation

#1 by (1 votes)
#2 by (0 votes)
#3 by (0 votes)

1

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

But I've tried several features using CSS and I can not.

Do you know which 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>

html html5 css css3 radiobutton

asked by anonymous 21.03.2018 / 19:40

3 answers

Optimization in sql JavaScript Compare ERROR

score 1 · Answer 1

You can use the style vertical-align in radios and 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><divclass="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><divclass="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>

score 0 · Answer 2

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

I did not have to deal with anything in your code, just added some classes as you can see below. Another detail is that it will always align vertically regardless of the 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><divclass="celula-imagens">
                <input type="radio" name="bandeira">
                <img src="http://placecage.com/70/70"></div><divclass="celula-imagens">
                <input type="radio" name="bandeira">
                <img src="http://placecage.com/100/100">
            </div>
        </td>
    </tr>
</table>

score 0 · Answer 3

Depending on the backward compatibility your project needs to reach (up to which old browsers it needs to support), you can solve with display: flex . You can check which browsers support the caniuse.com . (Thanks Ricardo Pontual for pointing this out.)

Then just apply this code in your style sheet that resolves:

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