我无法将元素完全居中

i can't fully center the element

提问人：Fire Gamer 提问时间：10/1/2023 更新时间：10/1/2023 访问量：39

问：

我有一个无线电输入的设计，中间有一个带有伪元素的圆圈::before

但是当我将输入大小设置为奇数时，它并没有完全居中

它以较小的尺寸出现更多

.input-radio { 
    display: flex;
    gap:  10px;
    height: fit-content;
}

.input-radio-button {
    --Primary-color:#07f;
    display: block;

    --size:15px;
    width: var(--size,10px);
    height: var(--size,10px);
    font-size: 13px;
    aspect-ratio: 1;
    border: var(--border-length,calc(var(--size,10px) / 7)) var(--Primary-color,#07f) solid;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    background: none;
    flex-grow: 0;
    flex-shrink: 0;
}

.input-radio-button::before { 
    content: "";
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--Primary-color);
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    font-family: Fontawesome;
    font-size: 1.2em;
    color: var(--Primary-color);
    translate: -50% -50%;
    transition: scale .2s .1s;
}
<div class="input input-radio checked"> 
    <button class="input-radio-button"></button> <!-- the radio button -->
    <label  class="input-radio-label">banana</label>
</div>

HTML CSS 伪元素

评论

答：

0赞 groophy lifefor 10/1/2023 #1

我简要地放置了一个父元素并将其垂直居中。这是最简单的解决方案。

.v-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

<div class="v-center">
      <button class="input-radio-button"></button> <!-- the radio button -->
</div>

我在下面申请并演示了。

.input-radio { 
    display: flex;
    gap:  10px;
    height: fit-content;
}

.v-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.input-radio-button {
    --Primary-color:#07f;
    display: block;

    --size:15px;
    width: var(--size,10px);
    height: var(--size,10px);
    font-size: 13px;
    aspect-ratio: 1;
    border: var(--border-length,calc(var(--size,10px) / 7)) var(--Primary-color,#07f) solid;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    background: none;
    flex-grow: 0;
    flex-shrink: 0;
}

.input-radio-button::before { 
    content: "";
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--Primary-color);
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    font-family: Fontawesome;
    font-size: 1.2em;
    color: var(--Primary-color);
    translate: -50% -50%;
    transition: scale .2s .1s;
}
<div class="input input-radio checked"> 
    <div class="v-center">
      <button class="input-radio-button"></button> <!-- the radio button -->
    </div>
    <label  class="input-radio-label">banana</label>
</div>

1赞 jessman5 10/1/2023 #2

居中而不更改 HTML，只需添加到align-items: center;.input-radio

.input-radio { 
    display: flex;
    align-items: center;
    gap:  10px;
    height: fit-content;
}

.input-radio-button {
    --Primary-color:#07f;
    display: block;

    --size:15px;
    width: var(--size,10px);
    height: var(--size,10px);
    font-size: 13px;
    aspect-ratio: 1;
    border: var(--border-length,calc(var(--size,10px) / 7)) var(--Primary-color,#07f) solid;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    background: none;
    flex-grow: 0;
    flex-shrink: 0;
}

.input-radio-button::before { 
    content: "";
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: var(--Primary-color);
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    font-family: Fontawesome;
    font-size: 1.2em;
    color: var(--Primary-color);
    translate: -50% -50%;
    transition: scale .2s .1s;
}
<div class="input input-radio checked"> 
    <button class="input-radio-button"></button> <!-- the radio button -->
    <label  class="input-radio-label">banana</label>
</div>

上一个：尝试将伪元素居中时，我有一个间隙

下一个：身体和身体：：定位前