如何垂直居中對齊和標題和單選按鈕

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>