Wyśrodkowanie tekstu i obrazka do linii

Question

Po prawej stronie w menu dodałem awatar użytkownika, lecz przez to tekst (nav-link) błędnie się ułożył. Ktoś jakieś pomysły jak temu zaradzić?

HTML:

<li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle hrefWhite" role="button" data-bs-toggle="dropdown">
        Zalogowano jako <%= 'CENZURA' === user.id ? 'admin ' : '' %><strong><%= user.username %>#<%= user.discriminator %></strong>
    </a>
</li>

<img src="https://cdn.discordapp.com/avatars/<%= user.id %>/<%= user.avatar %>.png?size=512" id="avatar" alt="">

CSS:

#avatar {
    border-radius:35%;
    height:52px;
}

 

Answer 1

Wstaw obrazek do znacznika <li>

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle hrefWhite" role="button" data-bs-toggle="dropdown">
    Zalogowano jako admin<strong>username</strong>
  </a>
</li>
<li> 
  <img src="https://picsum.photos/50/50/" id="avatar" alt="">
</li>

a w css, użyj np. vertical-align: middle;

/* dla demonstracji */
li {
  display: inline-block;
  border: 1px solid yellow;
}
/* dla demonstracji */

#avatar {
  vertical-align: middle;
  border-radius:35%;
  height:52px;
}

 

Comments

Nadal to samo.

Aktualny kod HTML:
 

                <ul class="navbar-nav">
                    <% if (user) { %>
                        <li class="nav-item dropdown">

                            <a class="nav-link dropdown-toggle hrefWhite" role="button" data-bs-toggle="dropdown">
                                Zalogowano jako <%= 'CENZURA' === user.id ? 'admin ' : '' %><strong><%= user.username %>#<%= user.discriminator %></strong>
                            </a>

                            <div class="dropdown-menu dropdown-menu-right">
                                <!--
                                    ...
                                -->
                            </div>
                        </li>

                        <li>
                            <img src="https://cdn.discordapp.com/avatars/<%= user.id %>/<%= user.avatar %>.png?size=512" id="avatar" alt="">
                        </li>

                    <% } else { %>
                        <a href="login" class="log-in hrefWhite">Zaloguj się do panelu</a>
                    <% } %>
                </ul>

CSS:
 

li {
    display:inline-block;
    border:1px solid yellow;
}

#avatar {
    vertical-align:middle;
    border-radius:35%;
    height:52px
}

---

Było by lepiej gdybyś wstawił wygenerowany kod html (to co w przeglądarce widać w devtool-u ) tego całego nav bar-a i cały kod css dotyczący tego nav bar-a.

 

Może cały nav-bar "objąć" jednym głównym <ul>.

Przykład

<ul class="nav">
  <li class="logo"></li>
  <li>Strona główna</li>
  <li class="active">Dashboard</li>
  <li>Administracja</li>
  <li>Serwer wsparcia</li>
  <li class="spacer"></li>
  <li class="nav-link">
    Zalogowany jako <strong>xxxxx</strong>
    <span class="toggle-dropdown">&#8895;</span>
  </li>
  <li><img src="https://picsum.photos/100/100/" class="avatar" /></li>
</ul>

body {
  margin: 0;
  padding: 0;
  background-image: url('https://picsum.photos/1500/1500/');
}
.nav {
  position: fixed;
  width: 100%;
  list-style-type: none;
  font: 400 0.8em/1em arial;
  color: black;
  background-image: linear-gradient(rgba(0,0,0,0.8), 
    rgba(128,128,128,0.6), 
    rgba(255,255,255,0.6), 
    rgba(128,128,128,0.6), 
    rgba(0,0,0,0.8));
  margin: 0;
  padding: 0 1em;
}
.nav li {
  display: inline-block;
  margin: 1em 0.6em;
}
.nav .logo {
  vertical-align: middle;
  width: 1.6em;
  height: 1.6em;
  border-radius: 25%;
  border: none;
  background-image: linear-gradient(135deg, white 10%, yellow, orange, orangered, purple 80%);
  box-shadow: 0 0 4px 3px darkorange;
  transform: rotate(45deg);
}
.nav .spacer {
  min-width: 35%;
}
.nav .avatar {
  vertical-align: middle;
  height: 1.6em;
  border-radius: 25%;
  border: 2px solid gray;
}
.nav .toggle-dropdown {
  font-size: 1.1em;
}
.nav .nav-link {
  margin-right: 0.1em;
}
.active {
  color: blue;
}

 

---

    <nav class="navbar navbar-expand-lg menu">
        <div class="container-fluid" onselectstart="return false" onselect="return false" oncopy="return false">

            <!-- LEFT -->
            <a href="/">
                <img src="CENZURA" class="logo" alt="">
            </a>
            <a href="/" class="navbar-brand">Tytuł</a>

            <!-- SMALL BUTTON (RIGHT) -->
            <button class="navbar-toggler navbar-light" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarText">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <hr class="dropdown-divider">

                    <li class="nav-item">
                        <a href="/" class="nav-link menuActive">Strona główna</a>
                    </li>
                    <li class="nav-item">
                        <a href="dashboard" class="nav-link hrefWhite">Dashboard</a>
                    </li>
                    <li class="nav-item">
                        <a href="admins" class="nav-link hrefWhite">Administracja</a>
                    </li>
                    <li class="nav-item ">
                        <a href="server" class="nav-link hrefWhite">Serwer wsparcia</a>
                    </li>

                    <hr class="dropdown-divider">
                </ul>

                <!-- RIGHT -->
                <ul class="navbar-nav">
                
                    <li class="nav-item dropdown">

                        <a class="nav-link dropdown-toggle hrefWhite" role="button" data-bs-toggle="dropdown">
                            Zalogowano jako <strong>Admin</strong>
                        </a>

                        <div class="dropdown-menu dropdown-menu-right">
                            <a href="dashboard" class="dropdown-item hrefWhite">Panel</a>
                            <a href="add" class="dropdown-item hrefWhite">Dodaj bota</a>

                            <div class="dropdown-divider menuLine"></div>

                            <a href="docs" class="dropdown-item hrefWhite">Dokumentacja</a>
                            <a href="stats" class="dropdown-item hrefWhite">Statystyki</a>
                            <a href="#" class="dropdown-item hrefWhite">Strona statusu</a>

                            <div class="dropdown-divider menuLine"></div>

                            <a href="logout" class="dropdown-item hrefWhite">« Wyloguj</a>
                        </div>
                    </li>
                
                </ul>
            </div>

        </div>
    </nav>

Podsyłam wygenerowany kod. Jeśli ten kod jest słabej jakości, to z góry przepraszam <: