>source

내 로고를 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를 사용하고 있습니다.


  • 답변 # 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를 쉽게 만들 수 있습니다. 적합하다고 생각되는 곳에 여백 패딩을 추가하십시오.

  • 이전 javascript - Singleton ES6 모듈이 여러 번 호출됩니까?
  • 다음 시트에 대한 하이퍼 링크를 빠르게 만드는 방법