导航栏以浮动右侧元素旁边的元素为中心

Question

我的导航栏。

我试图将链接置于navbar的中间位置。我一直在寻找解决方案，但它只是打破我的navbar，即将链接向右移动几个像素。我知道如果我放display: block它会使它居中但是我右边的物品会被撞掉。这就是我到目前为止所做的：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

Answer 1

您可以使用text-align: center上的.navbar正常居中徽标，并使浮动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%);
}