html - 如何将我的两个按钮定位到中心？
问题描述
我的问题是如何将我的两个按钮定位到中心？另外，如何去掉两个按钮内的灰色？
这是代码：
索引.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Learn Elementary Math at Prodigies!</title>
<link rel = "icon" type = "img/jpg" href = "img/prodigies.jpg"/>
<link rel = "stylesheet" type = "text/css" href = "reset.css"/>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<ul>
<li>
<a href = "signup.html">SIGN UP</a>
</li>
<li>
<a href = "teachings.html">TEACHINGS</a>
</li>
<li>
<a href = "documentation.html">DOCUMENTATION <img src = "file:///Users/axelpalomino/Desktop/dropdown%20icon.png" alt = "Dropdown Icon" width = "22" height = "19"/></a>
<ul>
<li>
<a href = "" >About</a>
</li>
<li>
<a href = "" >Contact</a>
</li>
<li>
<a href = "" >Credits</a>
</li>
</ul>
</li>
<li>
<a href = "index.html">HOME</a>
</li>
</ul>
</nav>
<header>
<h1>
PRODIGIES
<img src = "file:///Users/axelpalomino/Desktop/prodigies-logo.jpg" alt = "Prodigies-Logo" width = "60" height = "60"/>
</h1>
</header>
<div class = "topic-text">
<h3>
Learn Elementary Math.
</h3>
<h3>
Fun and Easy!
</h3>
</div>
<div class = "page-text">
<p>
Learn and master Math from Grade 1 to Grade 5.
</p>
<p>
We will show you all the tips and tricks to solve Math Problems faster!
</p>
</div>
<button class = "button1">I am a Parent</button>
<button class = "button2">I am a Student</button>
</body>
</html>
文档.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Learn Elementary Math at Prodigies!</title>
<link rel = "icon" type = "img/jpg" href = "img/prodigies.jpg"/>
<link rel = "stylesheet" type = "text/css" href = "reset.css"/>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,500&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<ul>
<li>
<a href = "signup.html">SIGN UP</a>
</li>
<li>
<a href = "teachings.html">TEACHINGS</a>
</li>
<li>
<a href = "documentation.html">DOCUMENTATION <img src = "file:///Users/axelpalomino/Desktop/dropdown%20icon.png" alt = "Dropdown Icon" width = "22" height = "19"/></a>
<ul>
<li>
<a href = "" >About</a>
</li>
<li>
<a href = "" >Contact</a>
</li>
<li>
<a href = "" >Credits</a>
</li>
</ul>
</li>
<li>
<a href = "index.html">HOME</a>
</li>
</ul>
</nav>
<header class = "header_doc">
<h1>
DOCUMENTATION
</h1>
</header>
</body>
</html>
教学.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Learn Elementary Math at Prodigies!</title>
<link rel = "icon" type = "img/jpg" href = "img/prodigies.jpg"/>
<link rel = "stylesheet" type = "text/css" href = "rest.css"/>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,500&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<ul>
<li>
<a href = "signup.html">SIGN UP</a>
</li>
<li>
<a href = "teachings.html">TEACHINGS</a>
</li>
<li>
<a href = "documentation.html">DOCUMENTATION <img src = "file:///Users/axelpalomino/Desktop/dropdown%20icon.png" alt = "Dropdown Icon" width = "22" height = "19"/></a>
<ul>
<li>
<a href = "" >About</a>
</li>
<li>
<a href = "" >Contact</a>
</li>
<li>
<a href = "" >Credits</a>
</li>
</ul>
</li>
<li>
<a href = "index.html">HOME</a>
</li>
</ul>
</nav>
<header>
<h1>
WHAT WILL I TEACH?
<img src = "file:///Users/axelpalomino/Desktop/prodigies-logo.jpg" alt = "Prodigies-Logo" width = "60" height = "60"/>
</h1>
</header>
</body>
</html>
注册.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Learn Elementary Math at Prodigies!</title>
<link rel = "icon" type = "img/jpg" href = "img/prodigies.jpg"/>
<link rel = "stylesheet" type = "text/css" href = "reset.css"/>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,500&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<ul>
<li>
<a href = "signup.html">SIGN UP</a>
</li>
<li>
<a href = "teachings.html">TEACHINGS</a>
</li>
<li>
<a href = "documentation.html">DOCUMENTATION <img src = "file:///Users/axelpalomino/Desktop/dropdown%20icon.png" alt = "Dropdown Icon" width = "22" height = "19"/></a>
<ul>
<li>
<a href = "" >About</a>
</li>
<li>
<a href = "" >Contact</a>
</li>
<li>
<a href = "" >Credits</a>
</li>
</ul>
</li>
<li>
<a href = "index.html">HOME</a>
</li>
</ul>
</nav>
<header>
<h1>
SIGN UP
<img src = "file:///Users/axelpalomino/Desktop/prodigies-logo.jpg" alt = "Prodigies-Logo" width = "60" height = "60"/>
</h1>
</header>
</body>
</html>
样式.css
body {
background-color: rgb(48, 176, 235); /*The background color of the page*/
color: rgb(199, 195, 195); /*The color of the words*/
font-family: 'Poppins', sans-serif; /*The font family of the website*/
}
header{
font-size: 30px; /*The font size of the header*/
text-align: center; /* The alignment of the title, Prodigies*/
}
h1 {
background-color: rgb(30, 109, 255); /*The background color of the header*/
}
footer {
text-align: left;
}
footer h3 {
display: inline-block;
font-size: 30px;
}
* {
margin: 0;
padding: 0;
}
ul {
}
ul li {
list-style: none;
float: right;
line-height: 90px;
position: relative;
}
ul li a:hover {
color: silver;
}
ul li ul {
display: none;
position: absolute;
background-color: white;
padding: 1px;
border-radius: 0px 0px 4px 4px;
}
ul li:hover ul{
display: block;
}
ul li ul li {
width: 180px;
border-radius: 4px;
}
ul li ul li a:hover {
background-color: #f3f3f3;
box-shadow: 0px 8px 16px 0px rgba(15, 98, 253, 0.2);
}
.topic-text{
font-size: 38px;
line-height: 86px;
height: 190px;
border: 3px solid rgb(48, 176, 235);
text-align: center;
color: rgb(30, 109, 255);
}
ul li a {
text-decoration: none;
font-size: 25px;
font-family: 'Poppins', sans-serif;
color: rgb(238, 237, 237);
padding: 0 20px;
overflow: hidden;
transition: 0.7s;
}
.page-text{
text-align: center;
font-size: 25px;
}
.button1{
text-decoration: none;
border-radius: 80px;
border: 19px solid white;
}
.button2{
text-decoration: none;
border-radius: 80px;
border: 19px solid white;
margin: 0;
padding-right: 50px;
padding-left: 50px;
}
重新解释一下，我不知道如何将两个按钮定位到中心。我也不知道如何去掉两个按钮内的灰色。请帮忙！
解决方案
只需使用 flexbox 并应用背景色
#container{
display:flex;
justify-content:center;
margin-top:150px;
}
.button{
margin:5px;
background-color:green;
width:10vw;
height:10vh;}
a{
text-decoration:none;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Learn Elementary Math at Prodigies!</title>
<link rel = "icon" type = "img/jpg" href = "img/prodigies.jpg"/>
<link rel = "stylesheet" type = "text/css" href = "reset.css"/>
<link rel = "stylesheet" type = "text/css" href = "style.css"/>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@1,500&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap" rel="stylesheet">
</head>
<body>
<nav>
<ul>
<li>
<a href = "signup.html">SIGN UP</a>
</li>
<li>
<a href = "teachings.html">TEACHINGS</a>
</li>
<li>
<a href = "documentation.html">DOCUMENTATION <img src = "file:///Users/axelpalomino/Desktop/dropdown%20icon.png" alt = "Dropdown Icon" width = "22" height = "19"/></a>
<ul>
<li>
<a href = "" >About</a>
</li>
<li>
<a href = "" >Contact</a>
</li>
<li>
<a href = "" >Credits</a>
</li>
</ul>
</li>
<li>
<a href = "index.html">HOME</a>
</li>
</ul>
</nav>
<header>
<h1>
PRODIGIES
<img src = "file:///Users/axelpalomino/Desktop/prodigies-logo.jpg" alt = "Prodigies-Logo" width = "60" height = "60"/>
</h1>
</header>
<div class = "topic-text">
<h3>
Learn Elementary Math.
</h3>
<h3>
Fun and Easy!
</h3>
</div>
<div class = "page-text">
<p>
Learn and master Math from Grade 1 to Grade 5.
</p>
<p>
We will show you all the tips and tricks to solve Math Problems faster!
</p>
</div>
<div id='container'>
<button class = "button">I am a Parent</button>
<button class = "button">I am a Student</button>
</div>
<div id='container2'> <a href = "documentation.html"> <button class = "button" href = "documentation.html">I AM A PARENT</button> <button class = "button">I AM A STUDENT</button> </a> </div>
</body>
</html>推荐阅读
- java - 在不了解语言的情况下将 RDF 数据读入 Apache Jena 模型
- javascript - 如何将 csv 文件中的数据加载到表单字段中？
- ios - 如何修复“无法下标'ClosedRange类型的值
' 在 swift 中具有类型为 'Int' 的索引" - java - 找不到包 oracle-java8-installer
- django - Django Rest Framework：自定义操作的 DRYer 分页
- javascript - 如何读取默认的内联 onclick 属性，使用里面的链接并对其进行处理？
- angular - 错误 TS2339：“可观察”类型上不存在属性“分区”
' - python - 从列表中选择项目时避免中断
- angular - 离子角度错误错误：未捕获（承诺）：错误：参数数组必须有参数。错误：参数数组必须有参数
- wix - 如何防止 WiX 安装程序删除安装前存在的空文件夹