HTML CSS - 输入无线电对齐中心和垂直

Question

从上图中可以看出，无线电是垂直对齐的，但我希望所有无线电也在父div中居中对齐。我正在为标签动态分配值。

HTML：

<div id="parent">
        <strong>Choose your username</strong><br/>
        <input type="text" maxlength="20" id="username" placeholder="Username">    

        <div id="radio_container">
        <br/><input type="radio" name="pass" id="passi1" value="pass1"><label for="passi1" id="pass1"></label>
        <br/><input type="radio" name="pass" id="passi2" value="pass2"><label for="passi2" id="pass2"></label>
        <br/><input type="radio" name="pass" id="passi3" value="pass3"><label for="passi3" id="pass3"></label>
        <br/><input type="radio" name="pass" id="passi4" value="pass4"><label for="passi4" id="pass4"></label>
        <br/><input type="radio" name="pass" id="passi5" value="pass5"><label for="passi5" id="pass5"></label>
        </div>            
    </div>

CSS：

#parent {
text-align: center;
margin: 0 auto;
width: 500px;
padding: 20px;
-moz-box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
border-radius: 10px;
font-size: 18px;                
}

#radio_container {
margin: 0 auto;
width: 200px;
text-align: left;
}

Answer 1

请为您的元素使用无序列表。似乎增加了一点控制力。这是我solution的小提琴。

<li><input type="radio" name="pass"><span id="pass1"></span></li>

另外需要注意的是，您需要设置以下样式：

ul {display: inline-block;}
li {text-align: left; list-style-type: none;}

Answer 2

首先，正如我所说，你需要用div包围你的无线电并让div居中。并保持文字对齐到左边。

你这样做到现在为止，但为了让你的div居中，做这个代码而不是你的代码：

#radio_container {
    margin: 0 auto;
    width: auto;
    text-align: left;
    display: table;
}

工作示例：http://jsfiddle.net/prrd14u2/1/

Answer 3

根据要求检查fiddle设置margin-left：

HTML：

<div id="parent">
        <strong>Choose your username</strong><br/>
        <input type="text" maxlength="20" id="username" placeholder="Username">    

        <br/><strong>Choose an option</strong>
        <div id="radio-button"><input type="radio" name="pass"><span id="pass1"></span>
        <br/><input type="radio" name="pass"><span id="pass2"></span>
        <br/><input type="radio" name="pass"><span id="pass3"></span>
        <br/><input type="radio" name="pass"><span id="pass4">jhvjrwr</span>
        <br/><input type="radio" name="pass"><span id="pass5">sw</span>
            </div>

    </div>

的CSS：

#parent {
text-align: center;
margin: 0 auto;
width: 500px;
padding: 20px;
-moz-box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.3);
border-radius: 10px;
font-size: 18px;                
}
#radio-button{
  text-align :left; 
  left: 50%;
  margin-left: 40%;
}