css box引导覆盖问题引起的引导

我有这个复选框按钮，我试图保持文本在中心。该按钮正常工作正常，但是当我包含bootstrap时，文本会显示在左上角。css box引导覆盖问题引起的引导

我已经寻找类似的问题和应用

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

来源

2016-05-17 shawon191

位置您的标签绝对和使用平移Y招中心这样的说法：

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/

来源

2016-05-17 14:02:30

检查后变为正方形。此外，文字似乎倾向于正确。添加更多的按钮会导致一些奇怪的问题http://jsfiddle.net/4qqczsw0/3/ – shawon191

这将修复方形问题.round-button-circle {position：relative} –

文字看起来对我来说很重要，可能有一些填充按钮div的东西扔掉了。你能举出一个奇怪的问题的例子吗？ –

css box引导覆盖问题引起的引导

回答

相关问题