CODEWITHSUNDEEP
htmlcss
Colbeyyy
Colbeyyy

Reputation: 91

Button not being centered in css

I am working on a simple project just for fun. I am trying to center a button using css. I have tried multiple solutions and I have spent about an hour searching for the answer

Here is my code. Please help.

body {  
     margin: 0;
     padding: 0;
     background: #FF8040;
     -webkit-animation: backgroundchange 10s;
     -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
     animation: backgroundchange 10s;
     animation-iteration-count: infinite;
}
.header{
    margin: 0 auto;
    position:relative;
 }
.header button{
    margin-left: auto;
    margin-right: auto;
    font-family: 'Opan Sans', sans-serif;
    font-size: 100px;
    color: white;
    text-shadow: 0px 3px 0px rgba(255,255,255,0.5);
    text-align:center;
    border: none;
    background:none;
 }
 /* Chrome, Safari, Opera */
@-webkit-keyframes backgroundchange {
    0% {background: #FF8040;}
    10% {background: #FFFF00;}
    20% {background: #FF8080;}
    30% {background: #00FF80;}
    40% {background: #B5FF3D;}
    50% {background: #00FFFF;}
    60% {background: #FF00FF;}
    70% {background: #FF391E;}
    80% {background: #FFFF80;}
    90% {background: #8080C0;}
    100% {background: #FF8040;} 
    
}

/* Standard syntax */
@keyframes backgroundchange {
    0% {background: #FF8040;}
    10% {background: #FFFF00;}
    20% {background: #FF8080;}
    30% {background: #00FF80;}
    40% {background: #B5FF3D;}
    50% {background: #00FFFF;}
    60% {background: #FF00FF;}
    70% {background: #FF391E;}
    80% {background: #FFFF80;}
    90% {background: #8080C0;}
    100% {background: #FF8040;} 
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello World</title>
	<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" type="text/css" href="style/style.css">
  </head>
  <body>
  		<div class="header">
			 <button class="header"> Hello World </button>
		</div>
  </body>
  
</html>

Thanks for the help!

Upvotes: 1

Views: 61

Answers (2)

user1012181
user1012181

Reputation: 8726

.header{
    position:relative;
    text-align:center;
 }

Upvotes: 0

Ian Hazzard
Ian Hazzard

Reputation: 7771

Simply replace margin: 0 auto in your header style with text-align: center. It should look like:

.header{
    text-align: center;
    position:relative;
 }

hidden example below:

body {  
     margin: 0;
     padding: 0;
     background: #FF8040;
     -webkit-animation: backgroundchange 10s;
     -webkit-animation-iteration-count: infinite; /* Chrome, Safari, Opera */
     animation: backgroundchange 10s;
     animation-iteration-count: infinite;
}
.header{
    text-align: center;
    position:relative;
 }
.header button{
    margin-left: auto;
    margin-right: auto;
    font-family: 'Opan Sans', sans-serif;
    font-size: 100px;
    color: white;
    text-shadow: 0px 3px 0px rgba(255,255,255,0.5);
    text-align:center;
    border: none;
    background:none;
 }
 /* Chrome, Safari, Opera */
@-webkit-keyframes backgroundchange {
    0% {background: #FF8040;}
    10% {background: #FFFF00;}
    20% {background: #FF8080;}
    30% {background: #00FF80;}
    40% {background: #B5FF3D;}
    50% {background: #00FFFF;}
    60% {background: #FF00FF;}
    70% {background: #FF391E;}
    80% {background: #FFFF80;}
    90% {background: #8080C0;}
    100% {background: #FF8040;} 
    
}

/* Standard syntax */
@keyframes backgroundchange {
    0% {background: #FF8040;}
    10% {background: #FFFF00;}
    20% {background: #FF8080;}
    30% {background: #00FF80;}
    40% {background: #B5FF3D;}
    50% {background: #00FFFF;}
    60% {background: #FF00FF;}
    70% {background: #FF391E;}
    80% {background: #FFFF80;}
    90% {background: #8080C0;}
    100% {background: #FF8040;} 
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello World</title>
	<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" type="text/css" href="style/style.css">
  </head>
  <body>
  		<div class="header">
			 <button class="header"> Hello World </button>
		</div>
  </body>
  
</html>

Upvotes: 1

Related Questions