不能讓我的按鈕居中

我一直無法讓我的按鈕居中在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

不能讓我的按鈕居中

回答

相關問題