如何對齊單選按鈕及其標簽？

Question

我正在設計表單，並且有一個單選按鈕部分，用戶可以在其中標識他們與大學的關系（學生，訪客，供應商或其他）。 由於某種原因，標簽與單選按鈕不對齊。 這是當前的樣子 。

我已經為此工作了幾個小時，並嘗試了各種方法。 我嘗試將按鈕和標簽格式化為表格，以使按鈕和標簽位於一個表元素中，所有按鈕均位於一行中。 我嘗試過手動更改標簽的位置，以使其垂直對齊方式與按鈕居中。 我也嘗試過使用vertical-align css屬性並顯示：inline-grid嘗試解決此問題。 另外，我的單選按鈕沒有顯示，然后與CSS重疊以為它們着色以匹配表單。 在上面的列表中，我也嘗試刪除了此文件，但仍然無法實現。 另外，“ row”和“ bg”是用於設置邊距和填充樣式的類。

這是HTML：

  <div id="statusrow" class="row bg" style="width: 45%;"> <div class="col-sm-3 color-text"><input id="vi" type="radio" value="Visitor" name="status"><label for="vi" style="font-weight:normal;">Visitor</label></div> <div class="col-sm-3 color-text"><input id="st" type="radio" value="Student" name="status"><label for="st" style="font-weight: normal;">Student</label></div> <div class="col-sm-3 color-text"><input id="ve" type="radio" value="Vendor" name="status"><label for="ve" style="font-weight: normal;">Vendor</label></div> <div class="col-sm-2 color-text"><input id="ot" type="radio" value="Other" name="status"><label for="ot" style="font-weight: normal;">Other</label></div> </div> 

Answer 1

嘗試這樣的事情：

 .color-text { text-align: center; width: 120px; display: inherit; } #statusrow{ width: 100% !important; text-align: center; display: inline-block; } #statusrow input { text-align: center; display: block; margin: 0 auto; } 

 <div id="statusrow" class="row bg" style="width: 45%;"> <div class="col-sm-3 color-text"><input id="vi" type="radio" value="Visitor" name="status"><label for="vi" style="font-weight:normal;">Visitor</label></div> <div class="col-sm-3 color-text"><input id="st" type="radio" value="Student" name="status"><label for="st" style="font-weight: normal;">Student</label></div> <div class="col-sm-3 color-text"><input id="ve" type="radio" value="Vendor" name="status"><label for="ve" style="font-weight: normal;">Vendor</label></div> <div class="col-sm-2 color-text"><input id="ot" type="radio" value="Other" name="status"><label for="ot" style="font-weight: normal;">Other</label></div> </div> 

這是第二個版本：

 .color-text { text-align: center; width: 120px; display: inherit; } #statusrow{ width: 100% !important; text-align: center; display: inline-block; } #statusrow input { text-align: center; display: block; margin: 0 auto; } #statusrow label{ margin-left: -65px; position: relative; top: -17px; } 

 <div id="statusrow" class="row bg" style="width: 45%;"> <div class="col-sm-3 color-text"><input id="vi" type="radio" value="Visitor" name="status"><label for="vi" style="font-weight:normal;">Visitor</label></div> <div class="col-sm-3 color-text"><input id="st" type="radio" value="Student" name="status"><label for="st" style="font-weight: normal;">Student</label></div> <div class="col-sm-3 color-text"><input id="ve" type="radio" value="Vendor" name="status"><label for="ve" style="font-weight: normal;">Vendor</label></div> <div class="col-sm-2 color-text"><input id="ot" type="radio" value="Other" name="status"><label for="ot" style="font-weight: normal;">Other</label></div> </div> 

Answer 2

謝謝您的幫助！ 這就是為我工作的最終結果：

  <div id="statusrow" class="row bg" style="width: 55%;"> <div class="col-sm-3 color-text"><label for="vi" style="font-weight: normal;"> <input id="vi" type="radio" value="Visitor" name="status" style="vertical-align: baseline;"> Visitor</label></div> <div class="col-sm-3 color-text"><label for="st" style="font-weight: normal;"> <input id="st" type="radio" value="Student" name="status" style="vertical-align: baseline;"> Student</label></div> <div class="col-sm-3 color-text"><label for="ve" style="font-weight: normal;"> <input id="ve" type="radio" value="Vendor" name="status" style="vertical-align: baseline;"> Vendor</label></div> <div class="col-sm-2 color-text"><label for="ot" style="font-weight: normal;"> <input id="ot" type="radio" value="Other" name="status" style="vertical-align: baseline;"> Other</label></div> </div> 

Answer 3

您嘗試過經典嗎？

input[type="radio"] {
  margin-top: -1px;
  vertical-align: middle;
}

它在這里純粹是與您共享的內容一起工作。 如果這不起作用，則是其他一些CSS導致了問題。

Answer 4

<div id="statusrow" class="row bg" style="width: 45%;">
  <div class="col-sm-3 color-text"><label class="Radio" for="vi" style="font-weight:normal;"><input class="Radio-Input" id="vi" type="radio" value="Visitor" name="status">Visitor</label></div>
  <div class="col-sm-3 color-text"><label class="Radio" for="st" style="font-weight: normal;"><input class="Radio-Input" id="st" type="radio" value="Student" name="status">Student</label></div>
  <div class="col-sm-3 color-text"><label class="Radio" for="ve" style="font-weight: normal;"><input class="Radio-Input" id="ve" type="radio" value="Vendor" name="status">Vendor</label></div>
  <div class="col-sm-2 color-text"><label class="Radio" for="ot" style="font-weight: normal;"><input class="Radio-Input" id="ot" type="radio" value="Other" name="status">Other</label></div>
</div>


<style>
  .Radio {
    display: inline-flex;
    align-items: center;
  }

  .Radio-Input {
    margin: 0 0.5rem 0;
  }
</style>

請嘗試以上更改，您將獲得所需的設計。