我需要将按钮放在页眉元素的中心,但我似乎做不到。请问我该怎么做?
这是 HTML 代码:
<header>
<nav>
<div class="logo"></div>
<ul>
<li><a href="">About</a></li>
<li><a href="">Products</a></li>
<li><a href="">Team</a></li>
<li><a href="">Blog</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
<a href="" class="button">Kdo jsme?</a>
</header>
这是 CSS 代码:
header{
background: url(header.jpg) no-repeat center;
background-size: cover;
width: 100%;
height: 700px;
text-align: center;
}
nav{
width: auto;
height: 80px;
float: top;
}
.logo{
display: block;
float:left;
background: url(logo.png) no-repeat;
height: 64px;
width: 64px;
margin: 70px 130px auto;
}
nav ul{
margin: 0px auto;
margin-right: 100px;
list-style-type: none;
}
nav ul li {
float: right;
padding: 0px 20px;
margin: 0 5px;
margin-right: 50px;
font-size: 17px;
height: 73px;
line-height: 13em;
}
nav a {
color: #C3C2C4;
text-decoration: none;
font-family: Open Sans;
}
nav a:hover{
color: white;
}
.nadpis{
margin: auto;
color: white;
font-family: Open Sans;
text-align: center;
padding-top: 250px;
}
.button {
font-family: Open Sans;
font-size: 18px;
color: white;
text-align: center;
border: 2px solid white;
border-radius: 20px;
height: 40px;
width: 200px;
margin: 0px auto;
padding-top: 10px;
display: block;
}
我已经尝试将按钮包装到一个 div 元素中并使 div 居中,但它似乎没有用。
最佳答案
它在中间,只需将您的按钮类样式更改为:
.button {
font-family: Open Sans;
font-size: 18px;
color: #000000;
text-align: center;
border: 2px solid #FF0000;
border-radius: 20px;
height: 40px;
width: 200px;
margin: 0px auto;
padding-top: 10px;
display: block;
margin-top:40px;
}
注意:它不是响应式的,根据您的要求记住这一点是个好主意
关于html - 我需要在标题元素中居中放置一个按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23758205/