如何正确居中选中的单选按钮？

Question

我正在设计一个单选按钮，但在检查时无法使点居中。我尝试使用绝对定位和网格显示将其居中，但没有成功。有人可以告诉我原因以及如何解决吗？

/*--------styling using absolute poistionning---------*/
input[type="radio"]#id2{
    appearance: none;
    position: relative;
    border-radius: 50%;
    height: 1.6rem;
    width: 1.6rem;
    cursor: pointer;
    border:2px solid rgb(18, 141, 223);
}

input[type="radio"]#id2::after{
    position: absolute;
    transform: translate(0.1rem,0.1rem);
    content:"";
    opacity: 0;
    border-radius: 50%;
    height: 1.2rem;
    width: 1.2rem;
    font-size: 1.2rem;
    line-height: 2rem;
    cursor: pointer;
    background: rgb(18, 141, 223);
}

input[type="radio"]#id2:checked::after{
    opacity: 1;
    transition: ease 450ms;
}

/*-----------------styling using grid----------*/

input[type="radio"]#id1 {
    appearance: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    height: 1.6rem;
    width: 1.6rem;
    cursor: pointer;
    border:2px solid rgb(18, 141, 223);
}

input[type="radio"]#id1::after{
    content:"";
    opacity: 0;
    border-radius: 50%;
    height: 1.2rem;
    width: 1.2rem;
    cursor: pointer;
    background: rgb(18, 141, 223);
}

input[type="radio"]#id1:checked::after{
    opacity: 1;
    transition: ease 450ms;
}

<label for="id1">using grid layout</label><br>
<input type="radio" name="transport" id="id1">
<label for="id2">using absolute positionning</label><br>
<input type="radio" name="transport" id="id2">

两种方法我都试过了，都没有成功。

Answer 1

您的

1.2rem

转换为非标准 19.19px，浏览器很难尝试定位。尝试将点大小更改为

1.125rem

（18 像素），将单选大小更改为

1.625rem

（26 像素）。对于

position:absolute

，添加

top

和负

transform: translate()

/*--------styling using absolute poistionning---------*/
input[type="radio"]#id2{
    appearance: none;
    position: relative;
    border-radius: 50%;
    height: 1.625rem;
    width: 1.625rem;
    cursor: pointer;
    border:2px solid rgb(18, 141, 223);
}

input[type="radio"]#id2::after{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    content:"";
    opacity: 0;
    border-radius: 50%;
    height: 1.125rem;
    width: 1.125rem;
    font-size: 1.125rem;
    line-height: 2;
    cursor: pointer;
    background: rgb(18, 141, 223);
}

input[type="radio"]#id2:checked::after{
    opacity: 1;
    transition: ease 450ms;
}

/*-----------------styling using grid----------*/

input[type="radio"]#id1 {
    appearance: none;
    display: grid;
    place-items: center;
    border-radius: 50%;
    height: 1.625rem;
    width: 1.625rem;
    cursor: pointer;
    border:2px solid rgb(18, 141, 223);
}

input[type="radio"]#id1::after{
    content:"";
    opacity: 0;
    border-radius: 50%;
    height: 1.125rem;
    width: 1.125rem;
    cursor: pointer;
    background: rgb(18, 141, 223);
}

input[type="radio"]#id1:checked::after{
    opacity: 1;
    transition: ease 450ms;
}

<label for="id1">using grid layout</label><br>
<input type="radio" name="transport" id="id1">
<label for="id2">using absolute positionning</label><br>
<input type="radio" name="transport" id="id2">