Search code examples
cssformsradio-button

Centering multiple input elements with equal space in CSS

I've got some radio buttons with their text. How can I center all this stuff, so that the first button is the same 'margin-left' as the 'margin-right' of last letter of the P of the last INPUT?

HTML

<div class='someClass'>
    <input type='radio' name='someName'>example
    <input type='radio' name='someName'>other text
</div>

CSS

.someClass{
    width:400px}

.someClass input{
    float:left}
Solution

  • You may use display: inline-block for elements to put theme together in a line, still keep wide box model properties like margin, padding, etc for them:

    .someClass{
  text-align: center;
}
.someClass .inputs{
  display: inline-block; 
}
    <div class='someClass'>
    <p class="inputs"><input type='radio' name='someName'>example</p>
    <p class="inputs"><input type='radio' name='someName'>other text</p>
</div>