CODEWITHSUNDEEP
htmlcssbuttoncenter
bonzo
bonzo

Reputation: 310

CSS Button Unknownly Centered

Alright, I've got a button that I can't figure out why in the heck it's centring itself. My first suspicion was in the css, but any sort of align or position that I used/changed didn't work.

Here's the html and css. You'll probably be able to find it faster than I would. (Also here's the jsfiddle link if anyone's interested: 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>

Upvotes: 0

Views: 41

Answers (2)

user2958788
user2958788

Reputation:

It's the margin: 0px auto; on your .Gcheckbbox div.

Remove that and it's all fine and dandy :)

Upvotes: 0

Terry
Terry

Reputation: 66103

It is horizontally centered because the containing parent, .Gcheckbox has left and right automatic margins, which has the effect of horizontally centering the element.

By removing or commenting out that line, we will have the element aligning to the left as per default left-to-right layout behavior.

/* 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;
}
<div class="Gcheckbox">
  <input type="checkbox" value="None" id="Gcheckbox" name="check" />
  <label for="Gcheckbox"></label>
</div>

Upvotes: 2

Related Questions