浮動小数点型の要素の隣にある要素を中心とするナビゲーションバー

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="https://stackoverflow.com/users/sign_in">Login</a><span class = "small_font_size"></span></li> 
 
    <li class="right"><a class="userlogin" href="https://stackoverflow.com/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>

私はいくつかのディスプレイフレックス特性や変換をしようとしてきたが、それは働いていません。整列したコンテンツのプロパティは私を助けませんでした。任意のヒントを歓迎します。

Answer 1

あなたのナビゲータの真ん中にロゴを配置することができます。あなたのテキストのロゴのスタイルにこれを追加すること

試してみてください。

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

Answer 2

あなたは.navbarにtext-align: centerを使用することにより、通常のロゴを中央にし、これを実現するために浮動ul要素position: absoluteを作ることができます。

.navbar { 
    text-align: center; 
} 

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