html - 如何让我的 Logo 按钮出现在标题元素的中间

Question

嘿，我正在尝试让我的 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>

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>