홈>2020-12-20 17:03source

html - navbar React에 이미지 로고와 브랜드 이름을 멋지게 배치

내 로고를 navbar의 왼쪽 상단에 멋지게 배치하려고합니다. 하지만 그렇게하면 브랜드 이름이 이상한 위치에 놓이게됩니다.

누군가가 나에게 로고와 브랜드를 navbar에 멋지게 배치 할 수있는 방법을 말해 주면 감사하겠습니다.

이것은 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;
}

현재 navbar에 materialize CSS를 사용하고 있습니다.

htmlcssreactjs

답변 # 1
이 CSS 라인을 추가하기 만하면됩니다.
```
.brand-logo {
  display: inline-flex !important;
}
```
CodesandBox : 로고 문제

답변 # 2

선언 할 수 있습니다. 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>

답변 # 3
플렉스 박스 사용
```
 #navbar{
   display:flex;
   align-items:flex-start;
   justify-content:center || space-around || space-evenly;
   }
```
이렇게해야합니다. flex-box를 사용하면 navbar를 쉽게 만들 수 있습니다. 적합하다고 생각되는 곳에 여백 패딩을 추가하십시오.

Python2.net

html - navbar React에 이미지 로고와 브랜드 이름을 멋지게 배치

관련 자료