2017-10-22 27 views
0

ラジオボタン付きのテキストがあります。私は<div style="text-align:center;">経由でそれを整列させた。それは次のようになります。ラジオボタンを中央揃えのテキストに垂直に整列する

enter image description here

全部が中央aligne Dのまま確保しながら、私は垂直すべてのラジオボタンを揃えることができます方法はありますか?

ラジオボタンを<div style="text-align:left;">に別々にラッピングしようとしましたが、必要な結果が得られません。あなたはdiv要素を中央にして、それにあなたのラジオを合わせる必要があり

+0

マークアップやCSSなどのコードサンプルを提供していただけますか? –

+0

どこが間違っているのかを簡単に識別できるようにコードを提供してください。 – nish

答えて

2

ので、DIV:

#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>

jsfiddleここにする必要がありhelp

0

<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>

関連する問題