CODEWITHSUNDEEP
css
Hassan Baig
Hassan Baig

Reputation: 15844

Vertically aligning radio buttons in center aligned text

I have some text with radio buttons. I center aligned it via <div style="text-align:center;">. It looks like this:

enter image description here

Is there a way I can vertically align all the radio buttons while ensuring the whole thing remains center aligned?

I tried wrapping the radio buttons separately in <div style="text-align:left;"> but that doesn't give the desired results I need.

Upvotes: 0

Views: 1525

Answers (2)

Johnny John Boy
Johnny John Boy

Reputation: 3284

You need to centre the div and then align your radios to that div so:

#main {
  text-align: center;
  margin: 0 auto;
}

#radioDiv {
  margin: 0 auto;
  width: auto;
  text-align: left;
  display: table;
}
<div id="main">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.<br/>

  <div id="radioDiv">
    <br/><input type="radio" name="example" value="x">x
    <br/><input type="radio" name="example" value="xx">xx
    <br/><input type="radio" name="example" value="xxx">xxx
  </div>
</div>

The jsfiddle here should help.

Upvotes: 4

Nofar Eliasi
Nofar Eliasi

Reputation: 109

<html>
<body>

<div style="margin: auto;width:500px;height: 100px;">
<form action="">
  <input type="radio" name="gender" value="male"> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
</form>
</div>
</body>
</html>

Upvotes: 0

Related Questions