Красивое размещение логотипа изображения и названия бренда на панели навигации React

Я пытаюсь разместить свой логотип в верхнем левом углу панели навигации. Однако, когда я это делаю, название бренда оказывается в странной позиции.

Я был бы признателен, если бы кто-нибудь сказал мне, как я могу красиво разместить логотип и бренд на панели навигации.

Это HTML:

  <nav id = "navbar">
    <div className = "nav-wrapper">
      <Link
        to = {this.props.auth ? "/dashboard" : "/"}
        className = "left brand-logo"
      >
        <img src = {Logo} alt = "logo" className = "photo" />
        <div id = "logo">Logo</div>
      </Link>
      <ul className = "right">{this.renderContent()}</ul>
    </div>
  </nav>

А это css:

#navbar {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}
#logo {
  display: inline-block;
  height: 100%;
  padding-left: 20px;
}
.photo {
  width: 64px;
  height: 64px;
}

В настоящее время я использую материализацию CSS для панели навигации.

🤔 А знаете ли вы, что...
HTML5 предоставляет возможность создавать веб-приложения, работающие в автономном режиме, с использованием технологии Service Workers.

[РЕШЕНО]Перейти к решению

1

3 482

3

Html113619 вопросов Css75481 вопрос Reactjs73808 вопросов Materialize703 вопроса

Вы можете объявить nav-wrapper как display:"flex" и использовать align-items:"center". Тогда он должен работать нормально.

Дайте мне знать, если это то, что вы искали.

Если нет, мы можем попробовать еще несколько вещей.

#Nav_Bar {
  height: 45px;
  background-color: salmon;
  display: flex;
  align-items: center;
}

#Nav_Bar>div {
  margin: 10px;
}

img {
  max-height: 35px;
}

<!DOCTYPE html>
<html lang = "en">

<head>
  <meta charset = "UTF-8" />
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0" />
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge" />
  <title>Static Template</title>
  <link rel = "stylesheet" href = "./index.css" />
</head>

<body>
  <nav id = "Nav_Bar">
    <div id = "Logo_Wrapper">
      <a href = "https:google.com">
        <img src = "./Logo.JPG" />
      </a>
    </div>
    <div>
      <h2>Logo</h2>
    </div>
  </nav>
</body>
</html>

Решено

Просто добавьте эту строку css, и все готово.

.brand-logo {
  display: inline-flex !important;
}

Коды и коробка: Выпуск логотипа

Используйте flex-бокс

  #navbar{
   display:flex;
   align-items:flex-start;
   justify-content:center || space-around || space-evenly;
   }

Это должно сработать, flex-box упрощает создание навигационных панелей. Добавьте поля, где вы считаете нужным.

Красивое размещение логотипа изображения и названия бренда на панели навигации React

Ответы:

Интересные вопросы для изучения