我想知道为什么我不能将我的 .workButton 移到中心 :D?我试过 text-align 或 margin:0 auto,但似乎没有任何效果......
如果您发现一些错误/或可以采取不同的做法,请告诉我!
任何提示都会非常有帮助!
这是代码的链接(我用scss写的)
* {
margin: 0;
padding: 0; // box-sizing: border-box;
}
body {
font-family: "Titillium Web", sans-serif;
}
.container {
max-width: 1140px;
width: 100vw;
height: 100vh;
margin: 0 auto;
overflow: hidden; // grid-template-rows: 600px 750px 900px 650px 1420px 900px 820px 100px;
}
#hero {
max-height: 600px;
height: 100vh;
background-color: #87509c;
h1 {
text-align: center;
color: #f7f3ea;
font-size: 42px;
line-height: 50px;
margin-top: 140px;
margin-bottom: 60px;
}
.workButton {
text-align: center;
font-size: 18px;
font-weight: 600;
color: #ffffff;
padding: 20px 80px;
text-transform: uppercase;
text-decoration: none;
border: 1px solid #eb7d4b;
border-radius: 5px;
background-color: #eb7d4b;
box-shadow: 0 2px #c86a40;
}
}
.navbar {
display: flex;
margin: 60px 20px 20px 40px;
ul {
margin-left: auto;
list-style-type: none;
align-self: center;
li {
float: left;
a {
text-decoration: none;
color: #ffffff;
padding: 5px 20px;
text-transform: uppercase;
transition-duration: 1.5s;
}
a:hover {
background-color: #643a79;
border-radius: 3px;
transition-duration: .4s;
}
}
}
}
最佳答案
将 text-align: center
应用到您的 #hero
包装器,您的链接将很好地居中。
关于css - 无法对齐 "a"标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48116124/