html - 单选按钮 - 对齐背景图像和文本

Question

我在对齐自定义单选按钮和文本时遇到问题(见图)

我为我的单选按钮使用了 css，但似乎无法对齐它们。 这是我的 HTML:

label.item {
  display: inline-block;
  position: relative;
}
label.item > input {
  visibility: hidden;
  position: absolute;
}
label.item > .radio-image::before {
  content: url("../tools/unchecked.png");


}
label.item > input[type="radio"]:checked + .radio-image::before {
  content: url("../tools/checked.png");
}
label.item > input[type="radio"]:hover + .radio-image::before{
  cursor: pointer;
}

<div class = "container">
  <div class = "form-group">
    <label>Body</label>
    <label class="item">
      <input type="radio" value="Good/Minor Flaws" name="size" required="required" /> 
      <div class="radio-image text-center">Good / Minor Flaws</div>
    </label>
    <label class="item">
      <input type="radio" value="Major Damage" name="size" required="required"/> 
      <div class="radio-image text-center">Major Damage </div>
    </label>
  </div>
</div>

https://jsfiddle.net/h2q7y4uj/#&togetherjs=ADTFQvN22E

Answer 1

给您一个解决方案 https://jsfiddle.net/h2q7y4uj/4/

div.item {
  display: inline-block;
  position: relative;
}

div.item > input {
  visibility: hidden;
  position: absolute;
}

div.item > .radio-image::before {
  content: url(http://via.placeholder.com/50x50);
}

div.item > input[type="radio"]:checked + .radio-image::before {
  content: url(http://via.placeholder.com/51x51);
}

div.item > input[type="radio"]:hover + .radio-image::before {
  cursor: pointer;
}

.radio-image {
  position: relative;
  width: 200px;
}

.radio-image > span{
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
}

<div class="container">
  <div class="form-group">
    <label>Body</label>
    <div class="item">
      <input type="radio" value="Good/Minor Flaws" name="size" required="required" />
      <div class="radio-image text-center">
        <span>Good / Minor Flaws</span></div>
    </div>
    <div class="item">
      <input type="radio" value="Major Damage" name="size" required="required" />
      <div class="radio-image text-center">
        <span>Major Damage</span> </div>
    </div>
  </div>
</div>

希望对您有所帮助。