Aligning the radio button below the image

Question

Aligning the radio button below the image

Navigation

#1 by (2 votes)
#2 by (1 votes)

0

Hello.

I have this code:

<div class="span12" style="padding: 1%; margin-left: 0">
    <div class="span3">
        <h2>Inicio da Palavra</h2>
        <img src= "/images/inicio.png"  width="300" height="202">
        <input type="radio" name="sentido" value="Início da Palavra"> 
    </div>

    <div class="span3">
        <h2>Final da Palavra</h2>
        <img src= "/images/final.png"  width="300" height="202">
        <input type="radio" name="sentido" value="Final da Palavra"> 
    </div>

    <div class="span3">
        <h2>Pé</h2>
        <img src= "/images/pe.png"  width="300" height="202">
        <input type="radio" name="sentido" value="Pé"> 
    </div>

    <div class="span3">
        <h2>Cabeça</h2>
        <img src= "/images/cabeca.png"  width="300" height="202">
        <input type="radio" name="sentido" value="Cabeça"> 
    </div>
</div>

The radio button is next to the image.

How do I leave it exactly down and centered?

Thank you

radiobutton

asked by anonymous 29.07.2018 / 03:16

2 answers

1

It's hard to give you an answer that will work in all cases. But as the image has a fixed size of 300px, you just have to give display:block in the input so that it goes down the image, then you get a margin-left of half the image width that would be 150px. And to finish putting a transform:translateX to make input center on the axis itself.

OBS: Here it should be 50% translateX(-48%) , but for some reason Chorme was rendering wrong, and with 48% it looks good ...

.span3 input {
    display: block;
    margin-left: 150px;
    transform: translateX(-48%); /* o ideal seria 50% aqui mas o Chrome cortou a borda do input com esse valor */
}

    <div class="span12" style="padding: 1%; margin-left: 0">
        <div class="span3">
            <h2>Inicio da Palavra</h2>
            <img src= "/images/inicio.png"  width="300" height="202">
            <input type="radio" name="sentido" value="Início da Palavra"> 
        </div>

        <div class="span3">
            <h2>Final da Palavra</h2>
            <img src= "/images/final.png"  width="300" height="202">
            <input type="radio" name="sentido" value="Final da Palavra"> 
        </div>

        <div class="span3">
            <h2>Pé</h2>
            <img src= "/images/pe.png"  width="300" height="202">
            <input type="radio" name="sentido" value="Pé"> 
        </div>

        <div class="span3">
            <h2>Cabeça</h2>
            <img src= "/images/cabeca.png"  width="300" height="202">
            <input type="radio" name="sentido" value="Cabeça"> 
        </div>
    </div>

29.07.2018 / 03:42

How to check if the url is true How do I make an INNER JOIN with condition?

score 2 · Accepted Answer

The image is inside a div that occupies the entire width of the screen (or its container).

If you centralize the radiobutton , it will stay in the middle of div without reference to the image.

As the image has a fixed width, group it and the radiobutton in a div with the same width of the image ( 300px ) and use text-align: center with the style below:

Some browsers (like Chrome, for example) include a small margin to radiobutton . So I suggest also include in CSS the style below to eliminate this margin so that the element is best positioned:
input[type="radio"]{
   margin: 0;
}

.span3 div{
   width: 300px;
   text-align: center;
}

input[type="radio"]{
   margin: 0;
}

<div class="span12" style="padding: 1%; margin-left: 0">
   <div class="span3">
      <h2>Inicio da Palavra</h2>
      <div>
         <img src= "/images/inicio.png"  width="300" height="202">
         <input type="radio" name="sentido" value="Início da Palavra"> 
      </div>
   </div>
</div>

Whereas this div-child will be the only one within the .span3 class. If you want to insert other div s, you have to put a class in it so you do not change the others:

.span3 .imagem{
   width: 300px;
   text-align: center;
}

input[type="radio"]{
   margin: 0;
}

<div class="span12" style="padding: 1%; margin-left: 0">
   <div class="span3">
      <h2>Inicio da Palavra</h2>
      <div class="imagem">
         <img src= "/images/inicio.png"  width="300" height="202">
         <input type="radio" name="sentido" value="Início da Palavra"> 
      </div>
      <div>
         Esta é outra div
      </div>
   </div>
</div>