jquery - 当其他 css 更改时，居中和中间元素未对齐

Question

我从两个 div 制作了一些自定义单选按钮。 结构是

<div class="outer"> // for radio outer
    <div class="inner"> // for radio inner fill
    </div>
</div>

CSS 是:

.outer {
    background: white;
    border-radius: 100%;
    border: 1px solid black;
    display: inline-block;
    vertical-align: middle;
    width: 20px;
    height: 20px;
    box-sizing: border-box;
}
.inner {
    width: 12px;
    height: 12px;
    background: black;
    border-radius: 100%;
}

不对其他元素做其他改动就可以了。 尽管我添加或删除了一些与这些单选按钮无关的元素，但它们没有对齐。 这不正常。因为如果有四个定制 radio ，只有一个或拖车或所有 radio 都未对准。 但是当缩放网页时，它们是正常的。 请给我解释一下! 是浏览器渲染还是什么原因？

See! It's slightly miss aligned.

Answer 1

内部点(单选)不是由外部容器填充或内部容器边距定位的。这就是为什么内部点不居中的原因。这是代码

.outer {
  background: white;
  border-radius: 100%;
  border: 1px solid black;
  display: inline-block;
  vertical-align: middle;
  width: 20px;
  height: 20px;
  box-sizing: border-box;
	padding:3px;
}

.inner {
  width: 12px;
  height: 12px;
  background: black;
  border-radius: 100%;
}

<div class="outer">
  <!-- // for radio outer -->
  <div class="inner">
    <!-- // for radio inner fill -->
  </div>
</div>

在 JSFiddle 预览:https://jsfiddle.net/itsselvam/phjmbg3s/