【发布时间】：2015-02-14 04:14:21
【问题描述】：
好的，我有一个按钮，我不知道为什么它会自动居中。我的第一个怀疑是在 css 中，但我使用/更改的任何类型的 align 或 position 都不起作用。
这里是 html 和 css。你可能会比我更快地找到它。 （如果有人感兴趣，这里是 jsfiddle 链接：http://jsfiddle.net/takkun/63uktgyo/）
/* ROUNDED ONE */
.Gcheckbox {
/*CHANGES GRAY SQUARE DIMENSIONS*/
width: 16px;
height: 33px;
background: #ff0000;
/*GRAY SQUARE BACKGROUND FADER*/
background: linear-gradient(top, #000000 100%, 0000ff 0%, #ff0000 0%);
background: -webkit-linear-gradient(top, 0000ff 100%, 0000ff 0%, #ff0000 0%);
background: -moz-linear-gradient(top, #000000 100%, 0000ff 0%, #ff0000 0%);
background: -o-linear-gradient(top, #000000 100%, 0000ff 0%, #ff0000 0%);
background: -ms-linear-gradient(top, #000000 100%, 0000ff 0%, #ff0000 0%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
margin: 0px auto;
position: relative;
}
.Gcheckbox label {
cursor: pointer;
position: absolute;
width: 10px;
height: 10px;
/*MAKES THE GREEN CIRCLE A CIRCLE*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
/********************************/
left: 3px;
top: 11.25px;
box-shadow: inset 0px 0px 0px rgba(239,239,238,1), 0px 0px 0px rgba(239,239,238,1);
-webkit-box-shadow: inset 0px 0px 0px rgba(239,239,238,1), 0px 0px 0px rgba(239,239,238,1);
-moz-box-shadow: inset 0px 0px 0px rgba(239,239,238,1), 0px 0px 0px rgba(239,239,238,1);
/*BEHIND GREEN CIRCLE BACKGROUND*/
background: -webkit-linear-gradient(top, #0000ff 0%, #0000ff 100%);
background: -moz-linear-gradient(top, #0000ff 0%, #0000ff 100%);
background: -o-linear-gradient(top, #0000ff 0%, #0000ff 100%);
background: -ms-linear-gradient(top, #0000ff 0%, #0000ff 100%);
background: linear-gradient(top, #0000ff 0%, #0000ff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0000ff', endColorstr='#0000ff',GradientType=1 );
}
.Gcheckbox label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
content: '';
position: absolute;
width: 10px;
height: 10px;
background: #00bf00;
background: linear-gradient(top, #00ff00 0%, #00ff00 100%);
background: -webkit-linear-gradient(top, #00ff00 0%, #00ff00 100%);
background: -moz-linear-gradient(top, #00ff00 0%, #00ff00 100%);
background: -o-linear-gradient(top, #00ff00 0%, #00ff00 100%);
background: -ms-linear-gradient(top, #00ff00 0%, #00ff00 100%);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
bottom: 0px;
right: 0px;
-webkit-box-shadow: inset 0px 0px 0px #00ff00, 0px 0px 0px rgba(42,171,43);
-moz-box-shadow: inset 0px 0px 0px #00ff00, 0px 0px 0px rgba(42,171,43);
box-shadow: inset 0px 0px 0px #00ff00, 0px 0px 0px rgba(42,171,43);
}
/*CHANGE HOVER EFFECT OPACITY*/
.Gcheckbox label:hover::after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
filter: alpha(opacity=30);
opacity: 0.3;
}
.Gcheckbox input[type=checkbox]:checked + label:after {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
input[type=checkbox] {
visibility:hidden;
}<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="styleCIRCLE.css" type="text/css">
<title>custom checkbox testing</title>
</head>
<body>
<!--styleCIRCLE -->
<div class="Gcheckbox">
<input type="checkbox" value="None" id="Gcheckbox" name="check" />
<label for="Gcheckbox"></label>
</div>
</body>
</html>【问题讨论】：