Question

我有这个复选框按钮，我试图将文本保持在中心。按钮工作正常，但是当我包含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;
}

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

Answer 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/

由bootstrap引起的css框大小覆盖问题

1 个答案: