Alignment of the radio button below the image

Question

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 below and centered ?

Thank you

Answer 1

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

If you center the radiobutton alone, he’ll be in the middle of div without reference to the image.

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

Some browsers (such as Chrome) include a small browser standard margin at radiobutton. So I suggest also include in CSS the style below to eliminate this margin so that the element is best placed:

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-son will be the only one within the class .span3. If you want to insert other divs, you will have to put a class on it so as not to 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>

Answer 2

It is difficult to give you an answer that will work in all cases. But as the image has a fixed size of 300px, just you give a display:block in the input for it to pass down the image, after you give a margin-left half the width of the image that would be 150px. And to finish put a transform:translateX to do the input centering on the axis itself.

OBS: Here should be 50% translateX(-48%), but for some reason Chorme was rendering wrong, and with 48% seems to be 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>