html - 具有百分比宽度的容器中的单选按钮伪元素定位问题

Question

我使用百分比宽度容器设置了以下单选按钮:

当然，中间的圆必须居中。

我发现这对于伪元素定位非常棘手。

根据浏览器的宽度，圆并不总是水平居中。这是单选按钮的 gif，同时调整窗口大小时:

是否可以在保持百分比宽度容器的同时使这个圆圈居中？

这是我的代码:

HTML:

<div class="form-section gender">
  <div class="label-col">
    <label>Gender</label>
  </div>
  <div class="form-section">
    <input type="radio" name="gender" id="male" value="male" />
    <label for="male"><span>Male</span></label>
  </div>
  <div class="form-section">
    <input type="radio" name="gender" id="female" value="female" />
    <label for="female"><span>Female</span></label>
  </div>
</div>

CSS(从 SCSS 编译而来):

@charset "UTF-8";
.gender {
  width: 80%;
  margin: 0 auto;
}
.gender .form-section {
  margin-top: 20px;
  display: inline-block;
  width: 70px;
}
.gender input[type=radio] {
  display: none;
  width: 30px;
}
.gender .form-section label {
  display: inline-block;
  cursor: pointer;
  position: relative;
  padding-left: 25px;
  margin-right: 15px;
  color: gray;
}
@keyframes fade-in {
  from {
    opacity: 0.7;
  }
  to {
    opacity: 1;
  }
}
.gender .form-section label:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  position: absolute;
  left: 0;
  bottom: 1px;
  background-color: transparent;
  border: 2px solid gray;
  border-radius: 50%;
}
.gender input[type=radio]:checked + label:before {
  font-family: Monaco, Menlo, Consolas, "Courier New", monospace;
  content: "•";
  color: blue;
  font-size: 21px;
  text-align: center;
  line-height: 17px;
  border: 2px solid blue;
  animation: fade-in 1s;
}
.gender input[type=radio]:checked + label {
  color: blue;
}

Codepen 链接:http://codepen.io/anon/pen/JXxvZW

Answer 1

我已使用 translate 将内点定位为标签居中，并更改标签样式以添加外边框

.gender {
  width: 80%;
  margin: 0 auto;
}
.gender .form-section {
  margin-top: 20px;
  display: inline-block;
  width: 70px;
}
.gender input[type=radio] {
  display: none;
  width: 30px;
}
.gender .form-section label {
  display: inline-block;
  cursor: pointer;
  position: relative;
  width: 16px;
  color: gray;
  border: 2px solid grey;
  border-radius: 50%;
  height: 16px;
}
.gender .form-section label span {
  margin-left: 25px;
}
@keyframes fade-in {
  from {
    opacity: 0.7
  }
  to {
    opacity: 1
  }
}
.gender .form-section label:before {
  content: "";
}
.gender input[type=radio]:checked + label:before {
  width: 8px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 8px;
  background: blue;
  position: absolute;
  border-radius: 50%;
  animation: fade-in 1s;
}
.gender input[type=radio]:checked + label {
  border-color: blue;
}

<div class="form-section gender">
  <div class="label-col">
    <label>Gender</label>
  </div>
  <div class="form-section">
    <input type="radio" name="gender" id="male" value="male" />
    <label for="male"><span>Male</span>
    </label>
  </div>
  <div class="form-section">
    <input type="radio" name="gender" id="female" value="female" />
    <label for="female"><span>Female</span>
    </label>
  </div>
</div>