以下隐藏示例：

Question

我正在开展一个简单的项目，只是为了好玩。我试图使用CSS中心按钮。我尝试了多种解决方案，我花了大约一个小时寻找答案

这是我的代码。请帮忙。

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>

感谢您的帮助！

Answer 1

只需将标题样式中的margin: 0 auto替换为text-align: center即可。它应该看起来像：

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

以下隐藏示例：

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>

Answer 2

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

按钮没有在CSS中居中

2 个答案:

以下隐藏示例：