如何對齊此自舉單選按鈕？

Question

頁面在這里

我使用以下代碼創建了單選按鈕，並且按鈕和文本彼此相鄰。 很好，但是並不是垂直於單選按鈕左側的文本輸入字段居中對齊。

<div class="col-md-3">
    <div id="edit-donation-frequent" class="form-radios form-group">
        <div class="form-item form-type-radio form-item-donation-frequent">
            <input type="radio" id="edit-donation-frequent-monthly" name="donation_frequent" value="monthly" class="form-radio" />  
            <label class="option font-size-sixteen" for="edit-donation-frequent-monthly">Monthly</label>
         </div>
    </div>
</div>
<div class="col-md-3">
    <div class="form-item form-type-radio form-item-donation-frequent form-group">
        <input type="radio" id="edit-donation-frequent-once" name="donation_frequent" value="once" class="form-radio" />  
        <label class="option font-size-sixteen" for="edit-donation-frequent-once">One time </label>
    </div>
</div>

頁面在這里

我把.form-item label.option { vertical-align: middle; } .form-item label.option { vertical-align: middle; }但結果仍然相同。 然后，我嘗試了margin-top和其他一些css樣式，但無法獲得我想要的東西。

我希望兩個單選按鈕（每月一次，一次和座機）看起來像下面的屏幕截圖。

和

如何調整屏幕截圖之類的頁面。

[更新]

根據Rachel的要求，該部分（行）的代碼（無論如何，通過訪問此頁面，您可以查看源代碼）：

<div class="row">
    <div class="col-md-3">
        <div class="form-item form-type-textfield form-item-donation-amount form-group">
            <input type="text" id="edit-donation-amount" name="donation_amount" value="" maxlength="128" class="form-text form-control" placeholder="Amount"/>
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-item form-type-select form-item-donation-currency form-group">
            <select id="edit-donation-currency" name="donation_currency" class="form-select form-control">
                <option value="DKK">DKK</option>
                <option value="GBP">GBP</option>
                <option value="USD">USD</option>
                <option value="EUR">EUR</option>
            </select>
        </div>
    </div>
    <div class="col-md-3">
        <div id="edit-donation-frequent" class="form-radios form-group">
            <div class="form-item form-type-radio form-item-donation-frequent">
                <input type="radio" id="edit-donation-frequent-monthly" name="donation_frequent" value="monthly" class="form-radio" />  
                <label class="option font-size-sixteen" for="edit-donation-frequent-monthly">Monthly</label>
             </div>
        </div>
    </div>
    <div class="col-md-3">
        <div class="form-item form-type-radio form-item-donation-frequent form-group">
            <input type="radio" id="edit-donation-frequent-once" name="donation_frequent" value="once" class="form-radio" />  
            <label class="option font-size-sixteen" for="edit-donation-frequent-once">One time </label>
        </div>
    </div>
</div>

Answer 1

好的，首先，您需要像使用“每月/一次”字段一樣圍繞“地線”元素放置周圍的div，並制作“每月/一次”包裝器，以便它們相同

<div class="row">
    <div class="col-md-3">
        <div class="form-item form-type-textfield form-item-donation-amount form-group">
    <input type="text" id="edit-donation-amount" name="donation_amount" value="" maxlength="128" class="form-text form-control" placeholder="Amount">
    </div>
    </div>
    <div class="col-md-3">
    <div class="form-item form-type-select form-item-donation-currency form-group">
    <select id="edit-donation-currency" name="donation_currency" class="form-select form-control">
      <option value="DKK">DKK</option>
      <option value="GBP">GBP</option>
      <option value="USD">USD</option>
      <option value="EUR">EUR</option>
    </select>
    </div>
    </div>
    <div class="col-md-3">
        <div id="edit-donation-frequent" class="form-radios form-group">
            <div class="form-item form-type-radio form-item-donation-frequent">
            <input type="radio" id="edit-donation-frequent-monthly" name="donation_frequent" value="monthly" class="form-radio">  
            <label class="option font-size-sixteen" for="edit-donation-frequent-monthly">Monthly</label>
        </div>
    </div>
    </div>
    <div class="col-md-3">
  <div id="" class="form-radios form-group">
        <div class="form-item form-type-radio form-item-donation-frequent form-group">
        <input type="radio" id="edit-donation-frequent-once" name="donation_frequent" value="once" class="form-radio">  
        <label class="option font-size-sixteen" for="edit-donation-frequent-once">One time </label>
        </div>
</div>
        </div>

和

<div class="col-md-4">
  <div class="form-item form-type-radio form-item-donation-frequent form-group">
    <input type="radio" id="edit-donation-land-line" name="landline" value="landline" class="form-radio">  
    <label class="option font-size-sixteen" for="edit-donation-land-line">Land Line</label>
    </div>
</div>

然后創建一個新的CSS規則

.form-item.form-type-radio {
    padding-top: 0.5em;
    margin-top: 0;
}

這應該可以解決您的問題。 希望能有所幫助