Question

嘿，我试图让我的徽标出现在标题元素的中间，我不知道还有什么可以尝试。（我不会在中间出现的按钮是第三个列表项，类名是logobutton。我曾尝试使用text-align而没有任何变化。唯一改变的是当我使用float但是浮动没有＆＃39;我有一个中心选项。我尝试使用text-align：center设置样式，但这会使整个列表居中。）

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

您可以利用父position和子ul上的li属性，并使用calc()值来定义left属性孩子li：

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

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

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

参考代码：

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: