Align Vertically Horizontally Aligned Objects

Question

Align Vertically Horizontally Aligned Objects

Navigation

#1 by (1 votes)

1

The idea here is centralizar verticalmente o radio button with its label (aligned horizontally).

Where am I going wrong?

<ulclass="formasPgto">

 <li>
  <input type="radio" name="pagamento" value="pagseguro" id="pagseguro" />
  <label for="pagseguro">Pag Seguro</label>
 </li>

 <li>
  <input type="radio" name="pagamento" value="boleto"  id="boleto" />
  <label for="boleto">Boleto</label>
 </li>

 <li>
  <input type="radio" name="pagamento" value="cartao" id="cartao" />
  <label for="cartao">Cartão</label>
 </li>

</ul>

CSS

.formasPgto {
  list-style: none;
  margin: 0 auto;
  padding: 0;  
  width: 800px;
  height: 100px;
  line-height: 100px;
  border: #000 .3px solid;
  text-align: center;
}

.formasPgto li {
  display: inline-block;
  width: 250px;
  height: 50px;
  border: #000 .3px solid;
  vertical-align: middle;
}

.formasPgto li label, .formasPgto li input[type=radio]  {
  display: inline-block;
  vertical-align: middle;  
}

css css3

asked by anonymous 21.05.2016 / 16:47

1 answer

Error in output of the optimum function when creating a regression structure Subs references and Functions where it is being used has disappeared in my Visual Studio

score 1 · Accepted Answer

The problem is in these two lines, remove it from <ul> :

...
line-height:100px;
...

There are several ways to center CSS elements vertically / horizontally:

link In this case, keeping the html structure you have was what I would do

Changing a little HTML structure, putting the elements to focus on a parent box, then we can choose this solution: link . We played with the displays ( display:table/display:table-cell ) in the parent box ( .formasPgto li ) and created another mother box ( <div> ) to help us in this task, to group the elements to center. A simple example: link

Taking advantage of the html structure we created in point two we can also choose: link . I also use this way a lot, setting position:relative in the parent box ( .formasPgto li ) and in the centering box ( div ) we define position:absolute among other things. Here we have to manually set a height to our <div> , otherwise by default the absolute position defines the height as 100%

I always advise to put a wrapper, in the last two cases a div , to group the elements to be centered

PS: I just did not write the whole CSS here so as not to get too extensive ... In these examples above you have CSS developed