gpt4 book ai didi

html - 由 Bootstrap 引起的 css 框大小覆盖问题

转载 作者:行者123 更新时间:2023-11-28 05:52:00 27 4
gpt4 key购买 nike

我有这个复选框按钮,我试图将文本保持在中心位置。该按钮正常工作,但当我包含 bootstrap 时,文本会出现在左上角。

我已经搜索过类似的问题并应用了

.round-button *,
.round-button *:before,
.round-button *:after {
-webkit-box-sizing: content-box !important;
-moz-box-sizing: content-box !important;
box-sizing: content-box !important;
}

但它不起作用。这是 fiddle http://jsfiddle.net/wga27Lvy/1/

最佳答案

绝对定位标签并使用 translateY 技巧将其居中:

label {
display: inline-block;
max-width: 100%;
margin-bottom: 5px;
font-weight: 700;
position: absolute !important;
left: 0;
z-index: 1;
height: 100%;
right: 0;
top: 50%;
transform: translateY(-50%);
}

然后添加相对于您的按钮的位置:

.round-button{
position:relative;
}

工作示例 http://jsfiddle.net/4qqczsw0/3/

关于html - 由 Bootstrap 引起的 css 框大小覆盖问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37278039/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com