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

Question

我在调整自定义单选按钮和文本时出现问题（参见图片）

我已经将css用于我的单选按钮，但似乎无法对齐它们。 这是我的HTML：

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>

希望这会对你有所帮助。

Answer 2

只需更新以下css代码

.radio-image {
            display: inline-block;
            line-height: 30px;
}

label.item>.radio-image::before {
           content: url("../tools/unchecked.png");
            float: left;
            line-height: 30px;
            display: inline-block;
            padding-right: 5px;
 }