导航栏将元素置于右侧浮动元素的中心

Question

我的导航栏

我正在尝试将 link 居中放置在我的 navbar 中间。我一直在四处寻找解决方案，但它只是破坏了我的 navbar，即将 link 向右移动了几个像素。我知道如果我把 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%);
}

导航栏将元素置于右侧浮动元素的中心

navigation bar centering an element next to floated right elements

html

css

flexbox

css-transforms