如何使我的徽标按钮出现在标题元素的中间

Question

嘿，我正在尝试让我的徽标出现在标题元素的中间，我不知道还能尝试什么。 （我不会出现在中间的按钮是第三个列表项，类名是 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>

Answer 1

您可以利用父 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>

Answer 2

您可以做的是在您的.logobutton 元素上使用position: absolute 属性并将零值应用于top, bottom, left & right 属性以使其居中对齐（因为它是一个锚标记，您还需要提供display: block 用于它的行为类似于块级元素。

另外，向父级ul 提供position: relative。

参考代码：

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;
  position: relative;
}

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;
  position: absolute;
  display: block;
  left: 0;
  right: 0;
  margin: auto;
  top: 0;
  bottom: 0;
}

<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>