不能让我的按钮到中心

时间：2017-05-16 13:45:03

标签： html css

我一直无法让我的按钮以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>

4 个答案:

答案 0 :(得分：2)

最好也是最简单的方法是使用flexbox并使用justify-content:center来对齐主轴中心的项目。您可以详细了解flexbox here.

答案 1 :(得分：1)

您可以将两个按钮包装在一个新的<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>代码。

答案 2 :(得分：0)

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

＆＃13;
＆＃13; 
@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;
}
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：-2)

＆＃13;
＆＃13; 
@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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

  1. 您的按钮未居中。它们位于<p>代码中。
  2. 如果您想将它们居中 - 使用对齐标记制作其他块
  3. <center>标记已弃用，不应使用此
相关问题
最新问题