如何垂直居中对齐和标题和单选按钮

Question

我正在尝试为我正在尝试放在一起的应用程序创建一个简单的配置文件页面。

它有4个问题，最后一个是Gender。

其他三个问题在“字段容器文本输入”中运行良好，但我想用单选按钮来处理性别问题。

当我尝试将Male/Female按钮与Gender标题对齐时，它们总是太靠近并且不与标题内联。

我想要实现的是获取按钮与Gender内联，并在与其他三个部分相同的距离。

这是我到目前为止有：

性别字段组

<div data-role="content"> 
    <div data-role="fieldcontain"> 
     <label for="height" style="font-size:25px"><strong>Height</strong></label> 
     <input style="display: inline-block; width: 5%" type="text" name="name" id="height" value="" /> 
     <p style="display: inline-block; margin-left:5px; margin-right:10px"> feet </p> 
     <input style="display: inline-block; width: 5%" type="text" name="name" id="height" value="" /> 
     <p style="display: inline-block; margin-left:5px; margin-right:10px"> inches OR </p> 
     <input style="display: inline-block; width: 5%" type="text" name="name" id="height" value="" /> 
     <p style="display: inline-block; margin-left:5px"> cm</p> 
    </div> 
    <div data-role="fieldcontain"> 
     <label for="height" style="font-size:25px"><strong>Height</strong></label> 
     <input style="display: inline-block; width: 5%" type="text" name="name" id="height" value="" /> 
     <p style="display: inline-block; margin-left:5px; margin-right:10px"> pounds OR </p> 
     <input style="display: inline-block; width: 5%" type="text" name="name" id="height" value="" /> 
     <p style="display: inline-block; margin-left:5px"> kg</p> 
    </div> 
    <div data-role="fieldcontain"> 
     <label for="age" style="font-size:25px"><strong>Age</strong></label> 
     <input style="width: 5%" type="text" name="name" id="age" value="" /> 
    </div> 
    <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true"> 
     <div style="display:inline !important;"> 
      <label style="font-size:25px"><strong>Gender</strong></label> 
     </div> 
     <div style="display:inline-block !important; float:right !important;"> 
      <input type="radio" name="radio-choice" id="male" value="choice-1" /> 
      <label for="male">Male</label> 
      <input type="radio" name="radio-choice" id="female" value="choice-2" /> 
      <label for="female">Female</label> 
     </div> 
    </fieldset> 
</div> 

Answer 1

更改标记来执行以下操作：

<div data-role="fieldcontain"> 
    <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true"> 
     <legend><strong style="font-size:25px">Gender</strong></legend> 
     <input type="radio" name="radio-choice" id="male" value="choice-1" checked="checked" /> 
     <label for="male">Male</label> 
     <input type="radio" name="radio-choice" id="female" value="choice-2" /> 
     <label for="female">Female</label> 
    </fieldset> 
</div>