不能让我的按钮居中

我一直无法让我的按钮居中在CSS中。我知道这样做的正确代码，但迄今为止我尝试过的所有代码都没有工作。我认为有些东西干扰了代码的中心位置，但是在一个小时后我还没有弄清楚这个问题。不能让我的按钮居中

这里是我的HTML：

@font-face { 
 
    font-family: BebasNeue; 
 
    src: url('BebasNeue Regular.otf'); 
 
} 
 

 
body { 
 
    font-family: helvetica; 
 
    background-color: #F6F6F6; 
 
    margin: 0 auto; 
 
    width: 1400px; 
 
} 
 

 
.button { 
 
    background-color: #DE1B1B; 
 
    /* Red */ 
 
    border: none; 
 
    color: white; 
 
    padding: 15px 32px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-size: 16px; 
 
} 
 

 
ul { 
 
    margin: 0 auto; 
 
    list-style-type: none; 
 
    background-color: #2B2B2B; 
 
    font-size: 25px; 
 
    font-family: BebasNeue, sans-serif; 
 
} 
 

 
h1 { 
 
    float: left; 
 
    margin: 0px 0 20px 0; 
 
    padding: 5px 0 0 0; 
 
    width: 100%; 
 
    font-size: 50px; 
 
    font-family: BebasNeue, sans-serif; 
 
    color: #E9E581; 
 
    background-image: url('classroomb.jpg'); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    background-position: center center; 
 
} 
 

 
#heading { 
 
    margin-top: 
 
} 
 

 
li { 
 
    display: inline; 
 
} 
 

 
a { 
 
    padding: 6px; 
 
    text-decoration: none; 
 
    color: #DE1B1B; 
 
    position: center; 
 
} 
 

 
p { 
 
    font-size: 22px; 
 
    padding: 40px; 
 
    margin: 0 auto; 
 
    width: 1000px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Ms. Houck's Math Class</title> 
 
    <link rel="stylesheet" href="HouckStyle1.css"> 
 
</head> 
 

 
<body> 
 
    <header> 
 
    <div> 
 
     <ul> 
 
     <li><a href="#"> Home </a></li> 
 
     <li><a href="#"> Homework </a></li> 
 
     <li><a href="#"> HW Solutions </a></li> 
 
     <li><a href="#"> Documents </a></li> 
 
     <li><a href="#"> Calendar </a></li> 
 
     </ul> 
 
    </div> 
 
    </header> 
 
    <center> 
 
    <h1> 
 
     <div id="heading">Ms. Houck's Math Classes<br><br><br><br></h1> 
 
    </div> 
 
    </center> 
 
    <p> 
 
    Welcome students! Please use the navigation bar at the top of the page to access what you need. You can also access the homework and schedule by clicking the links below. <br> 
 
    <br><a href="https://docs.google.com/document/d/1Py9kSEH-vaubUM_r_oZ4lwf4pZn6TX2FXH8_-O7gLDw/edit" class="button">Homework</a> 
 
    <a href="https://drive.google.com/drive/folders/0B-nZ04EpMx69QUFETFlJU213bEU" class="button">Homework Answers</a> 
 
    </p> 
 
</body> 
 

 
</html>

来源

2017-05-16 Chris B.

'position：center'？你从哪里得到这个信息？ – melancia

'已被长期弃用。 – melancia

请更清楚，并提出一些关于当前问题和你想要实现的图片 –

-2

@font-face { 
 
    font-family: BebasNeue; 
 
    src: url('BebasNeue Regular.otf'); 
 
} 
 

 
body { 
 
    font-family: helvetica; 
 
    background-color: #F6F6F6; 
 
    margin: 0 auto; 
 
    width: 1400px; 
 
} 
 

 
.button { 
 
    background-color: #DE1B1B; 
 
    /* Red */ 
 
    border: none; 
 
    color: white; 
 
    padding: 15px 32px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-size: 16px; 
 
} 
 

 
ul { 
 
    margin: 0 auto; 
 
    list-style-type: none; 
 
    background-color: #2B2B2B; 
 
    font-size: 25px; 
 
    font-family: BebasNeue, sans-serif; 
 
} 
 

 
h1 { 
 
    float: left; 
 
    margin: 0px 0 20px 0; 
 
    padding: 5px 0 0 0; 
 
    width: 100%; 
 
    font-size: 50px; 
 
    font-family: BebasNeue, sans-serif; 
 
    color: #E9E581; 
 
    background-image: url('classroomb.jpg'); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    background-position: center center; 
 
} 
 

 

 
li { 
 
    display: inline; 
 
} 
 

 
a { 
 
    padding: 6px; 
 
    text-decoration: none; 
 
    color: #DE1B1B; 
 
    position: center; 
 
} 
 

 
p { 
 
    font-size: 22px; 
 
    padding: 40px; 
 
    margin: 0 auto; 
 
    width: 1000px; 
 
} 
 
.center{ 
 
text-align:center; 
 
}

<header> 
 
    <div> 
 
     <ul> 
 
      <li><a href="#"> Home </a></li> 
 
      <li><a href="#"> Homework </a></li> 
 
      <li><a href="#"> HW Solutions </a></li> 
 
      <li><a href="#"> Documents </a></li> 
 
      <li><a href="#"> Calendar </a></li> 
 
     </ul> 
 
    </div> 
 
</header> 
 
<br/> 
 

 
<div class="center"><h1>Ms. Houck's Math Classes</h1></div><br/><br/><br/><br/><br/> 
 
<p> 
 
    Welcome students! Please use the navigation bar at the top of the page to access what you need. You can also access the homework and 
 
    schedule by clicking the links below. 
 
</p> 
 
<br><br> 
 
<div class="center"> 
 
<a href="https://docs.google.com/document/d/1Py9kSEH-vaubUM_r_oZ4lwf4pZn6TX2FXH8_-O7gLDw/edit" class="button">Homework</a> 
 
    <a href="https://drive.google.com/drive/folders/0B-nZ04EpMx69QUFETFlJU213bEU" class="button">Homework Answers</a></div>

您的按钮不居中。他们在<p>的代码。
如果要居中他们 - 让与之对齐的标签其他块
<center>标签已经过时，不应使用此

来源

2017-05-16 13:47:49 xAqweRx

你打算解释一下你的答案吗，还是你想要每个人都玩一个差异化的游戏？ – j08691

你可以只换两个按钮中的一个新的<div>你再告诉有它的内容为中心：

加入CSS：

.center { 
    text-align: center; 
}

HTML：

<div class="center"> 
    <a href="https://docs.google.com/document/d/1Py9kSEH-vaubUM_r_oZ4lwf4pZn6TX2FXH8_-O7gLDw/edit" class="button">Homework</a> 
    <a href="https://drive.google.com/drive/folders/0B-nZ04EpMx69QUFETFlJU213bEU" class="button">Homework Answers</a> 
</div>

JSFiddle

请考虑使用<div class="center">代替deprecated<center>标签。

来源

2017-05-16 13:50:50 jrn

您可以在navigation ul（取出格）上使用flexbox和justify-content: center; 使用li a上的边距来修改间距。

@font-face { 
 
    font-family: BebasNeue; 
 
    src: url('BebasNeue Regular.otf'); 
 
} 
 

 
body { 
 
    font-family: helvetica; 
 
    background-color: #F6F6F6; 
 
    margin: 0 auto; 
 
    width: 1400px; 
 
} 
 

 
.button { 
 
    background-color: #DE1B1B; 
 
    /* Red */ 
 
    border: none; 
 
    color: white; 
 
    padding: 15px 32px; 
 
    text-align: center; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    font-size: 16px; 
 
} 
 

 
ul { 
 
    margin: 0 auto; 
 
    list-style-type: none; 
 
    background-color: #2B2B2B; 
 
    font-size: 25px; 
 
    font-family: BebasNeue, sans-serif; 
 
} 
 

 
h1 { 
 
    float: left; 
 
    margin: 0px 0 20px 0; 
 
    padding: 5px 0 0 0; 
 
    width: 100%; 
 
    font-size: 50px; 
 
    font-family: BebasNeue, sans-serif; 
 
    color: #E9E581; 
 
    background-image: url('classroomb.jpg'); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    background-position: center center; 
 
} 
 

 
#heading { 
 
    margin-top: 
 
} 
 

 
header ul { 
 
display: flex; 
 
justify-content: center; 
 
} 
 

 
li { 
 
    display: inline; 
 
} 
 

 
a { 
 
    padding: 6px; 
 
    text-decoration: none; 
 
    color: #DE1B1B; 
 
    position: center; 
 
} 
 

 
p { 
 
    font-size: 22px; 
 
    padding: 40px; 
 
    margin: 0 auto; 
 
    width: 1000px; 
 
}

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>Ms. Houck's Math Class</title> 
 
    <link rel="stylesheet" href="HouckStyle1.css"> 
 
</head> 
 

 
<body> 
 
    <header> 
 

 
     <ul> 
 
     <li><a href="#"> Home </a></li> 
 
     <li><a href="#"> Homework </a></li> 
 
     <li><a href="#"> HW Solutions </a></li> 
 
     <li><a href="#"> Documents </a></li> 
 
     <li><a href="#"> Calendar </a></li> 
 
     </ul> 
 
    
 
    </header> 
 
    <center> 
 
    <h1> 
 
     <div id="heading">Ms. Houck's Math Classes<br><br><br><br></h1> 
 
    </div> 
 
    </center> 
 
    <p> 
 
    Welcome students! Please use the navigation bar at the top of the page to access what you need. You can also access the homework and schedule by clicking the links below. <br> 
 
    <br><a href="https://docs.google.com/document/d/1Py9kSEH-vaubUM_r_oZ4lwf4pZn6TX2FXH8_-O7gLDw/edit" class="button">Homework</a> 
 
    <a href="https://drive.google.com/drive/folders/0B-nZ04EpMx69QUFETFlJU213bEU" class="button">Homework Answers</a> 
 
    </p> 
 
</body> 
 

 
</html>

来源

2017-05-16 13:56:04 StefanBob

最好的和最简单的方法是使用flexbox并使用justify-content:center其对准在主轴线的中心的项目。您可以详细了解flexboxhere.

来源

2017-05-16 14:16:49

不能让我的按钮居中

回答

相关问题