html - 标签上方单选按钮的样式

Question

我正在使用 CSS Sprite 添加一些自定义背景 radio 。我需要 2 种样式(标签左侧的单选按钮和标签顶部的单选按钮)。

我已经在我的跨度上尝试了 inline-block 和 margin:auto (HTML 中的内联样式)来将 radio 移动到上面，但现在背景位于 00 位置。

如何设置我的 radio 的样式，使其位于标签上方并居中？

.my-radio-class {
  width: 50px;
  height: 50px;
  opacity: 0;
  vertical-align: middle;
}

.my-radio-class+span {
  background: url('/image/hG6IV.gif');
  width: 22px;
  height: 22px;
  margin-left: -22px;
  display: inline-block;
  pointer-events: none;
  vertical-align: middle;
}

.my-radio-class:checked+span {
  background-position: -22px 0;
}

<div class="row">
  <div class="col-md-6">
    <input id="mys-radio-1" class="my-radio-class" type="radio" name="my-group">
    <span></span>
    <label for="mys-radio-1">Small</label>
  </div>
</div>
<h3 class="pt-5">Above</h3>
<br />
<div class="row">
  <div class="col-md-6">
    <input id="mys-radio-2" class="my-radio-class" type="radio" name="my-group">
    <span style="display:inline-block: margin:auto;"></span>
    <label for="mys-radio-2">Small - Need Radio Above</label>
  </div>
</div>

雪碧

Answer 1

您可以在要移动到下方的范围上使用 display:block。您必须使用 margin-left 和 margin-top 来移动其位置。

给你一个想法:

.my-radio-class {
  width: 50px;
  height: 50px;
  opacity: 0;
  vertical-align: middle;
}

#mys-radio-2+span{
  display: block;
  margin-left: 11px;
  margin-top:-30px;
}

.my-radio-class+span {
  background: url('/image/hG6IV.gif');
  width: 22px;
  height: 22px;
  margin-left: -22px;
  display: inline-block;
  pointer-events: none;
  vertical-align: middle;
}

.my-radio-class:checked+span {
  background-position: -22px 0;
}

<h3 class="pt-5">Left</h3>
<div class="row">
  <div class="col-md-6">
    <input id="mys-radio-1" class="my-radio-class" type="radio" name="my-group">
    <span></span>
    <label for="mys-radio-1">Small</label>
  </div>
</div>
<h3 class="pt-5">Above</h3>
<div class="row">
  <div class="col-md-6">
    <input id="mys-radio-2" class="my-radio-class" type="radio" name="my-group">
    <span style="display:inline-block: margin:auto;"></span>
    <label for="mys-radio-2">Small</label>
  </div>
</div>