gpt4 book ai didi

html - 无法让我的按钮居中

转载 作者:太空宇宙 更新时间:2023-11-04 08:42:39 25 4
gpt4 key购买 nike

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

最佳答案

最好和最简单的方法是使用 flexbox 并使用 justify-content:center 将元素对齐在主轴的中心。您可以了解有关 flexbox 的更多信息 here.

关于html - 无法让我的按钮居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44003261/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com