Question

现在将近1个小时，我尝试在单选按钮的中央放置似乎需要的标签。我现在尝试了所有，但到目前为止没有任何效果。任何帮助将不胜感激，但到目前为止，我确实做了很多尝试。

<div class="col-md text-center custom-control custom-radio">
    <input autocomplete='off' type="radio" class="custom-control-input"  
          th:id="some id" th:name="${testcase.id}"  > 
    <label class="custom-control-label" th:for="some id">Label</label>
</div>

它位于div class =“ row”内，在此特定列中以col-md标记，我只希望单选按钮居中

Answer 1

这是一种解决方法，它带有div.falsecheck，它替换了真实的单选按钮：

.falsecheck {width:20px; height:20px; border:1px solid #ccc; margin: auto; border-radius:10px}
.custom-control-label::before {
  display:none !important;
  visibility: none;
  opacity:0
}
label {text-align:center}
input[type="radio"]:checked+.falsecheck {
    background-color: #4d4d4d;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col-md text-center custom-control custom-radio">
  
     <label class="custom-control-label" th:for="some id">
      <input autocomplete='off' type="radio" class="custom-control-input"  
          th:id="some id" th:name="${testcase.id}"  >
          <div class="falsecheck"></div>
     Label</label>
      

</div>

Answer 2

在输入和标签之间放置 br 标签设置与输入标签相关的css类，具体宽度：25px；（取决于标签文字）

.custom-control-input {
width: 25px;
}

<div class="col-md text-center custom-control custom-radio">
    <input autocomplete='off' type="radio" class="custom-control-input"  
          th:id="some id" th:name="${testcase.id}"  > 
    <br>
    <label class="custom-control-label" th:for="some id">Label</label>
</div>

现在选中此项，您想像这样居中

.text-center{
text-align: center;
}

 <div class="col-md text-center custom-control custom-radio">
        <input autocomplete='off' type="radio" class="custom-control-input"  
              th:id="some id" th:name="${testcase.id}"  > 
        <label class="custom-control-label" th:for="some id">Label</label>
    </div>

如何使带有标签的单选按钮居中

2 个答案: