嘿,我正在尝试让我的 Logo 出现在页眉元素的中间我不知道还能尝试什么。 (我不会让出现在中间的按钮是第三个列表项,类名是 logobutton。我尝试使用 text-align 并且没有任何变化。唯一改变的是当我使用 float 但 float 没有居中选项。我尝试使用 text-align:center 设置样式,但它使整个列表居中。)
header {
border-color: black;
background-color: #DC143C;
padding-top: 15px;
padding-bottom: 15px;
padding-right: 5px;
padding-left: 5px;
margin: 0;
}
body {
background-color: black;
}
@font-face {
font-family: TransFormers;
src: url('fonts/Transformers Movie.ttf') format('truetype');
}
a {
text-decoration: none;
}
.a-nav-top:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
}
li a.button {
border-radius: 30px;
text-align: center;
display: inline;
background-color: black;
color: #DC143C;
width: 10%;
padding-left: 5px;
padding-right: 5px;
}
li a.logobutton {
font-family: TransFormers;
text-align: center;
color: black;
}
<header>
<ul>
<li><a class="a a-nav-top button" href="#">Home</a></li>
<li><a class="a a-nav-top button" href="#">Shop</a></li>
<li><a class="logobutton" href="#">RG</a></li>
</ul>
</header>
最佳答案
您可以利用父级 ul
和子级 li
的 position
属性,并使用 calc()
值定义子 li
的 left
属性:
ul {
_position: relative; /* added; first example */
list-style-type: none;
margin: 0;
padding: 0;
}
/* first example */
ul > li:last-child { /* could also use :nth-child(3) */
_position: absolute; /* added */
_left: calc(50% - 11.1px); /* half of the header width - half of the logo width */
}
/*****/
/* second example */
ul {
display: flex; /* added */
justify-content: space-between; /* added */
}
/*****/
header {
border-color: black;
background-color: #DC143C;
padding-top: 15px;
padding-bottom: 15px;
padding-right: 5px;
padding-left: 5px;
margin: 0;
}
body {
background-color: black;
}
@font-face {
font-family: TransFormers;
src: url('fonts/Transformers Movie.ttf') format('truetype');
}
a {
text-decoration: none;
}
.a-nav-top:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
li {
display: inline;
}
li a.button {
border-radius: 30px;
text-align: center;
display: inline;
background-color: black;
color: #DC143C;
width: 10%;
padding-left: 5px;
padding-right: 5px;
}
li a.logobutton {
font-family: TransFormers;
text-align: center;
color: black;
}
<header>
<ul>
<div>
<li><a class="a a-nav-top button" href="#">Home1</a></li>
<li><a class="a a-nav-top button" href="#">Shop1</a></li>
</div>
<li><a class="logobutton" href="#">RG</a></li>
<div>
<li><a class="a a-nav-top button" href="#">Home2</a></li>
<li><a class="a a-nav-top button" href="#">Shop2</a></li>
</div>
</ul>
</header>
关于html - 如何让我的 Logo 按钮出现在标题元素的中间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46993796/