垂直居中对齐标签单选按钮

Question

我创建了自定义单选按钮，看起来非常不错。标签垂直对齐只有一个小问题。我希望标签应该在垂直方向上居中对齐，但是它似乎在顶部对齐。我一直在玩line-height和vertical-align属性，但是似乎没有任何作用。

Fiddle in scss。

当前（未预期）

更新：如果我按照建议添加align-items:center，则随着文本大小的增加，单点位置也会更改。示例已更新。

.btn-radio {
     position: relative;
     margin-bottom: 0.5rem;
     line-height: 1;
}

 input[type="radio"] {
     display: none; 
}
 label {
     display: grid;
     grid-template-columns: auto 1fr;
     text-align: left;
     align-items:center;
}
 input[type="radio"] + label {
     cursor: pointer;
     margin-bottom: 0.5rem;
}
 input[type="radio"] + label:before {
     content: "";
     display: inline-block;
     width: 20px;
     height: 20px;
     margin-right: 5px;
     border: 2px solid #adb5bd;
     background-color: white;
     border-radius: 50%;
     vertical-align: middle;
}
 input[type="radio"].disabled + label, input[type="radio"]:disabled + label {
     background-color: #f8f9fa;
     opacity: 0.5;
     cursor: not-allowed;
}
 input[type="radio"]:checked + label:before {
     background-color: #007a9d;
     border-color: #007a9d;
}
 input[type="radio"]:checked + label:after {
     content: "";
     position: absolute;
     left: 8px;
     top: 8px;
     width: 9px;
     height: 9px;
     border-radius: 50%;
     background-color: white;
}
 

 <div class="btn-radio">
    <input class="radio-sm" type="radio" name="sizeRadios" id="sizeRadios1" value="option1" checked />
    <label class="" for="sizeRadios1">
      Radio button
    </label>
  </div>

  <div class="btn-radio">
    <input class="radio-sm" type="radio" name="sizeRadios" id="sizeRadios2" value="option2" checked />
    <label class="" for="sizeRadios2">
      This is long text for radio button, I know this can not be that long in real life but with for radio can be short so it should warp content correctly.
    </label>
  </div>

Answer 1

您只需在<label>元素中添加align-items: center;即可使它们居中。它将使元素垂直居中。

所以您的最终代码应该是这样的：

.btn-radio {
  position: relative;
  margin-bottom: 0.5rem;
  line-height: 1;
}

input[type="radio"] {
  display: none;
}

label {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
}

input[type="radio"]+label {
  cursor: pointer;
  margin-bottom: 0.5rem;
}

input[type="radio"]+label:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  border: 2px solid #adb5bd;
  background-color: white;
  border-radius: 50%;
  vertical-align: middle;
}

input[type="radio"].disabled+label,
input[type="radio"]:disabled+label {
  background-color: #f8f9fa;
  opacity: 0.5;
  cursor: not-allowed;
}

input[type="radio"]:checked+label:before {
  background-color: #007a9d;
  border-color: #007a9d;
}

input[type="radio"]:checked+label:after {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: white;
}

<div class="btn-radio">
  <input class="radio-sm" type="radio" name="sizeRadios" id="sizeRadios1" value="option1" checked />
  <label class="" for="sizeRadios1">
      Radio button
    </label>
</div>

<div class="btn-radio">
  <input class="radio-sm" type="radio" name="sizeRadios" id="sizeRadios2" value="option2" checked />
  <label class="" for="sizeRadios2">
      This is long text radio button
    </label>
</div>

更新

好吧，您在此处提供的更新的问题与原始问题有所不同，它与align-items: center;和其他内容无关。但是，我将解释为什么会发生这种情况，以及您应该如何解决。

这是怎么回事？

位置absolute的元素将不计入正常的页面布局，因此以这种方式定义它们会使事情意外地变得怪异。

如何解决？

要解决此问题，您需要使他们分别与父母（而不是文件body）相对应。为此，您只需将父元素的位置设置为relative。然后，在您的特定情况下，无需指定top元素，因为align-items将注意其垂直位置。

所以您的最终代码应该是这样的：

.btn-radio {
  position: relative;
  margin-bottom: 0.5rem;
  line-height: 1;
}

input[type="radio"] {
  display: none;
}

label {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
}

input[type="radio"]+label {
  cursor: pointer;
  margin-bottom: 0.5rem;
}

input[type="radio"]+label:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  border: 2px solid #adb5bd;
  background-color: white;
  border-radius: 50%;
  vertical-align: middle;
}

input[type="radio"].disabled+label,
input[type="radio"]:disabled+label {
  background-color: #f8f9fa;
  opacity: 0.5;
  cursor: not-allowed;
}

input[type="radio"]:checked+label:before {
  background-color: #007a9d;
  border-color: #007a9d;
}

input[type="radio"]:checked+label:after {
  content: "";
  position: absolute;
  left: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background-color: white;
}

<div class="btn-radio">
  <input class="radio-sm" type="radio" name="sizeRadios" id="sizeRadios1" value="option1" checked />
  <label class="" for="sizeRadios1">
    Radio button
  </label>
</div>

<div class="btn-radio">
  <input class="radio-sm" type="radio" name="sizeRadios" id="sizeRadios2" value="option2" checked />
  <label class="" for="sizeRadios2">
    This is long text for radio button, I know this can not be that long in real life but with for radio can be short so it should warp content correctly.
  </label>
</div>