Navigationsleiste zentriert ein Element neben floated rechten Elementen

Question

meiner Navigationsleiste.

Ich versuche, einen Link in der Mitte meiner navbar zu zentrieren. Ich habe nach einer Lösung gesucht, aber es bricht nur meine navbar, d. H. Bewegt sich die Verbindung um ein paar Pixel nach rechts. Ich weiß, wenn ich display: block setze, wird es es zentrieren, aber meine Elemente auf der rechten Seite werden abgerissen. Das ist, was ich habe, so weit:

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

Ich habe einige Display-flex Eigenschaften und Transformationen versucht, aber es funktioniert nicht. Die Eigenschaft aligned-content hat mir auch nicht geholfen. Schätzen Sie irgendwelche Tipps.

Answer 1

Sie könnten versuchen, Ihr Logo absolut in der Mitte Ihrer Navbar zu platzieren.

Versuchen, diese zu Ihrem Text Logo Stile:

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

Answer 2

Sie könnten das Logo Zentrum normalerweise durch text-align: center auf dem .navbar und machen das Floating ul Element position: absolute mit, dies zu verwirklichen.

.navbar { 
    text-align: center; 
} 

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