Vue：如何将单选按钮放在标签的中心

Question

将单选按钮放在标签的中心

如何将单选按钮置于垂直居中？目前我用的是top: 50 %，但是没有居中对齐。我没有硬编码右边的高度 div。但是，我希望使用一个函数来分配最高值；右边的高度 div 是动态的。

有什么办法可以得到身高吗？

                <b-tabs>
                    <b-tab>
                        <b-form-radio-group>
                            <b-form-radio>
                                <div>Lorem .....</div>
                            </b-form-radio>
                        </b-form-radio-group>
                    </b-tab>
                </b-tabs>
                .custom-control-label {
                  &:before {
                    background: $white;
                    border: 2px solid #b7b9bc;
                    border-radius: 100%;
                    cursor: pointer;
                    top: 50%;
                   }
                   &:after {
                    top: 50%;
                   }
                }

Answer 1

使用：

top: 50%;
transform:translateY(-100%)

您将元素居中对齐到顶部 50% 起点，因此您需要将其平移 -100% 自身高度以使其居中。

Answer 2

top: 50%;
transform:translateY(-50%)

Answer 3

单选按钮的高度为 16px。像这样将 top 属性赋予 :after 和 :before 解决了这个问题。

    .custom-control-label {
        &:before {
            background: $white;
            border: 2px solid #b7b9bc;
            border-radius: 100%;
            cursor: pointer;
            top: calc((100% - 16px)/2);
        }
        &:after {
            top: calc((100% - 16px)/2);
        }
    }

Vue：如何将单选按钮放在标签的中心

Vue: How to place the radio button at the center of the label

css

sticky

将单选按钮放在标签的中心

有什么办法可以得到身高吗？