在导航栏 React 上很好地放置图像徽标和品牌名称

Question

我正在尝试将我的徽标很好地放置在导航栏的左上角。然而，当我这样做时，品牌名称被置于一个奇怪的位置。

如果有人能告诉我如何将徽标和品牌很好地放置在导航栏上，我将不胜感激。

这是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。

Answer 1

您可以将 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>

Answer 2

只需添加此 css 行即可。

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

代码和框： Logo Issue

Answer 3

使用弹性框

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

这应该可以做到，flex-box 可以毫不费力地创建导航栏。在您认为合适的地方添加边距。

在导航栏 React 上很好地放置图像徽标和品牌名称

placing image logo and brand name nicely on the navbar React

html

css

materialize

reactjs