导航栏居中浮动右侧元素旁边的元素

Question

我的导航栏。

我正在尝试将链接置于我的 navbar 中间。我一直在寻找解决方案，但它只是破坏了我的navbar，即将链接向右移动了几个像素。我知道如果我输入display: block，它会居中，但我右边的物品会被撞掉。这是我目前所拥有的：

.navbar > a.favmovies-title {
  font-family: Impact, Haettenschweiler, "Franklin Gothic Bold", Charcoal, "Helvetica Inserat", "Bitstream Vera Sans Bold", "Arial Black", "sans serif";
  font-size: 155%;
  width: 25%;
  float: none;
  text-align: center;
  text-decoration: none;
  background-color: #FF6347;
  color: orange;
}

.navbar {
  height: 100px;
  overflow: hidden;
  background-color: #FF6347;
  padding: 1%;
  position: fixed;
  width: 100%;
}

.navbar > ul > li.right {
  float: right;
}

.navbar > ul > li > a.userlogin {
  font-size: 50%;
}

<div class="navbar">
  <a class="favmovies-title" href="/movies/find_top_rating/1">FavMovies</a>
  <ul>
    <li class="right"><a class="userlogin" href="/users/sign_in">Login</a><span class = "small_font_size"></span></li>
    <li class="right"><a class="userlogin" href="/users/sign_up">Signup</a></li>
    <input class="right" id="Search-Bar" type="text">
    <li class="right" id="Search">search <img src="/assets/icons/searchicon.fw.png" alt="Search" id="SearchIcon"></li>
  </ul>
</div>

我一直在尝试一些显示 flex 属性和转换，但它不起作用。对齐内容属性也没有帮助我。感谢任何提示。

Answer 1

您可以通过在.navbar 上使用text-align: center 使徽标正常居中，并使浮动ul 元素position: absolute 来实现这一点。

.navbar {
  text-align: center;
}

.navbar > ul {
  position: absolute;
  top: 0;
  right: 0;
}

Answer 2

您可以尝试将徽标绝对定位在导航栏的中间。

尝试将此添加到您的文本徽标样式中：

.navbar > a.favmovies-title {
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}