标签上方的样式单选按钮

Question

我使用CSS精灵添加一些自定义背景无线电。我需要2种样式（标签左侧的收音机和标签顶部的收音机）。

我在我的跨度上尝试了内联块和边距：自动（HTML中的内联样式）来移动收音机，但现在背景现在处于00位置。

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

＆＃13;

＆＃13;

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

.my-radio-class+span {
  background: url('https://i.stack.imgur.com/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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

的Sprite

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('https://i.stack.imgur.com/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>

Answer 2

在div标签中添加一些css代码

  

.center {display：flex;证明内容：中心; }

使其成为中心

＆＃13;

＆＃13;

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

.my-radio-class+span {
  background: url('https://i.stack.imgur.com/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;
}

.center {
 display:flex;
 justify-content:center;
 }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 3

你可以试试这个。 我已将input和span元素放入label元素中。我已将元素与dislpay:flex对齐。

＆＃13;

＆＃13;

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

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

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

label {
  display: flex;
  flex-direction: row;
  text-align: center;
}

label.center {
  display: flex;
  flex-direction: column;
}

label.center span {
  margin: auto;
}

＆＃13;

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<div class="row">
  <div class="col-md-6">

    <label for="mys-radio-1">
      <input id="mys-radio-1" class="my-radio-class" type="radio" name="my-group">
      <span></span>
      Small</label>
  </div>
</div>
<h3 class="pt-5">Above</h3>
<br />
<div class="row">
  <div class="col-md-6">

    <label for="mys-radio-2" class="center">
      <input id="mys-radio-2" class="my-radio-class" type="radio" name="my-group">
      <span></span>
      Small - Need Radio Above</label>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;