Question

我从tow 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%;
}

无需对其他元素进行其他更改也可以。尽管我添加或删除了与那些单选按钮无关的某些元素，但它们未对齐。不正常因为如果有四个自定义无线电，则只有一个或两个或全部未对准。但是当缩放网页时，它们是正常的。请给我解释！是由浏览器渲染引起的还是其他原因？

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/

Answer 2

只需添加line-height:20px和display:inline-block即可使内圆居中。

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

<div class="outer"> 
  <div class="inner">
  </div>
</div>

其他CSS更改时居中和中间元素未对齐

2 个答案: