如何修复导航栏中徽标的错误对齐?

Phyxable

我的网站顶部有这个导航栏,上面有公司的徽标。但这似乎并没有使中心对齐。<img src="images/onboarding/logo_webbanner.png" width="96px" ></img>这条线是徽标的代码,但位于中心左侧。

导航栏组件:

<div className="home-nav-bar">
    <div className="margin-top-4">
    <div className="flex-row width-100vw">
        <div className="flex-1" style={{ maxWidth: "5vw"}} />
        <div className="flex-1">      
        <div className="flex-row">
          <div className="flex-1">
            {/* <a href="/home">
              <img
                style= {{ width: "24px" }}
                src="/images/arrow-left.png"
              />
            </a> */}
            </div>
            <div className="flex-1">
              <div className="home-nav-bar-title futura-20-300 center">
                <img src="images/onboarding/logo_webbanner.png" width="96px" ></img>
              </div>                  
            </div>
            {/* <div className="flex-1" style={{ textAlign: "right" }}>
              <Link to="/settings">
                <img
                  className = "settings-cog"
                  src="/images/cog.png"
                />
              </Link>
            </div> */}
            <div className="flex-1" style = {{marginTop : "5px"}}>
              <Link to="/home">
                <div className="settings-title" style={{ color: "#FF5A66" }}>
                  Home
              </div>
              </Link>
              <Link to="/programs">
                <div className="settings-title">
                  Programs
              </div>
              </Link>
              <Link to="/settings">
                <div className="settings-title" style={{ marginRight : "10px" }}>
                  Account
              </div>
              </Link>
            </div>
          </div>  
          <div className="flex-1" style={{ maxWidth: "5vw" }} />
        </div>
      </div>
    </div>
  </div>

CSS:

.item {
  margin-top: -12px;
  border-radius: 0px;
  box-shadow: none;
  width: 320px;
  font-size: 20px;
  font-weight: 900;
  text-align: center;
}
.top {
  box-shadow: 0 0px 16px 2px #DDDDDD;
}
.home-nav-bar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 100%;
    background-color: white;
    z-index: 2;
    height: 36px;
    box-shadow: 0 0px 16px 2px #DDDDDD;
  }
  .home-bottom-nav-bar {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    position: fixed;
    bottom: 0;
    background-color: #fff;
    z-index: 2;
    height: 40px;
  }
  .home-bottom-nav-button {
    height: 44px;
    width: 101px;
    border-radius: 20px;
    background-color: #FF5A66;
  }
  .home-bottom-nav-bar-title {
    height: 28px;
    color: #2f2f2e;
    font-family: "futura-pt";
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 0.25px;
    line-height: 28px;
  }
  .home-nav-bar-title {
    height: 29px;
    width:80vw;
    color: #2f2f2e;
    font-family: Futura;
    font-size: 24px;
    font-weight: 900;
    line-height: 29px;
    justify-content: center;
  }
  .home-title {
    height: 28px;
    width: 80vw;
    color: #2f2f2e;
    font-family: "futura-pt";
    font-size: 24px;
    font-weight: 300;
    letter-spacing: 0.25px;
    line-height: 28px;
  }
  .home-score-title {
    height: 28px;
    width: 51px;
    color: #2f2f2e;
    font-family: "futura-pt";
    font-size: 20px;
    font-weight: 300;
    letter-spacing: 0.25px;
    line-height: 28px;
  }
  .home-score-subtitle {
    height: 20px;
    width: 91px;
    color: #6f6f6f;
    font-family: "futura-pt";
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.25px;
    line-height: 20px;
  }
  .home-subtitle {
    height: 24px;
    width: 60vw;
    color: #424874;
    font-family: "futura-pt";
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0.15px;
    line-height: 24px;
  }
  .home-next-session-image {
    height: auto;
    width: 90vw;
    border-radius: 10px;
  }
  .home-pyramid {
    width: 80px;
    background-color:'pink'
  }
  .home-score-circle-title {
    height: 29px;
    color: #2f2f2e;
    font-family: "futura-pt";
    font-size: 24px;
    font-weight: 300;
    line-height: 29px;
  }```

迈克尔·厄勒加德·安徒生

如果我正确理解了您的标记,似乎您在徽标的父div上有弹性。如果要将图像在div中居中,可以使用:

justify-content: center;
align-items: center;

如果您使用的是flex-direction:row,justify-content:center将使子级水平居中,而align-items:center将使子级垂直居中。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章