0

I have this navigation bar on the top of my website, with the company's logo in it. But it doesn't seem to be getting centre aligned. <img src="images/onboarding/logo_webbanner.png" width="96px" ></img> this line is the code for the logo but its stays a bit to the left of the centre.

Navbar Component: 

<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;
  }```
Phyxable
  • 109
  • 10

2 Answers2

1

If i understand your markup correct it seems you have flex on the parent div of your logo. If you want to center the image in the div you can use:

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

If you are using flex-direction: row, justify-content: center will center the children to the middle horizontally, and align-items: center will center the children vertically.

Michael Ørregaard Andersen
  • 94
  • 1
  • 15
  • i don't want to center the image only in that div, but in the global div element. So the image stays in the middle the problem seems to be the Links of the other three elements i.e home, Programs, Account, are pushing the logo toward the left. – Phyxable Dec 07 '19 at 18:23
  • But if you want to center it inside the whole div, then you can add position: relative; to the parent div, and then use position absolute; (or fixed), left: 50%; transform: translateX(-50%); This will center your image to the middle of the screen (or the nearest parent div with position: relative;). – Michael Ørregaard Andersen Dec 09 '19 at 06:37
  • Thanks Bro appreciate it. – Phyxable Dec 09 '19 at 21:46
0

try width and height in percentage it will work otherwise resize it.

suyash narhare
  • 11
  • 1