Keep items centered with interfering elements-CodePudding

I have a navbar which basically has one child div that serves as a list, and then these three options (potentially more in the future)

I want to ask how I can add a logo (img) at the left of this navbar, while maintaining the #navbar-options in the center, and all its items, cause if I try to add the image now, it will push the navbar options to off to the right depending on the image

<div id="navbar">
    <div id="navbar-options">
        <div ><a  href="/">Home</a></div>
        <div ><a  href="/newsfeed">Newsfeed</a></div>
        <div ><a  href="/societies">Societies</a></div>
    </div>
</div>

This is all the relevant CSS

#navbar {
    width: calc(100vw - 0);
    max-width: 100%;
    min-height: 2.5vw;
    background-color: var(--tertiary-clr);
    color: white;
    display: flex;
}

#navbar-options {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    margin: 0 auto;
}

.navbar-option {
    font-size: 1.5rem;
    padding: 1rem;
}

This is the navbar currently, and an arrow indicating where I would like the image, without affecting the current position of the navbar options

CodePudding user response：

#navbar {
    width: calc(100vw - 0);
    max-width: 100%;
    min-height: 2.5vw;
    background-color: red;
    color: white;
    display: flex;
    position: relative;
}

#navbar-options {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    margin: 0 auto;
}

.navbar-option {
    font-size: 1.5rem;
    padding: 1rem;
}

img.logo {
    position: absolute;
    height: 100%;
}

<div id="navbar">
    <img  src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Stack_Overflow_icon.svg/768px-Stack_Overflow_icon.svg.png" />
    <div id="navbar-options">
        <div ><a  href="/">Home</a></div>
        <div ><a  href="/newsfeed">Newsfeed</a></div>
        <div ><a  href="/societies">Societies</a></div>
    </div>
</div>

By saying "without affecting the current position of the navbar options", meaning you want the "links" to be placed centered while ignoring the logo right? You can achieve it using the snippet above, do note that the important part on the snippet to make it ignore the logo is by:

Add position relative to the #navbar
Add position absolute to the .logo

So the logo will be positioned based on the navbar, you can improve the spacing/padding by changing the logo to a div first with padding, and put the image inside that div

Of course I believe there's many ways to achieve what you want, you can fiddle with the code and other properties like "calc", "translate" and other stuff.

CodePudding user response：

I just added the image I set the width and height and it worked

#navbar {
  width: calc(100vw - 0);
  max-width: 100%;
  min-height: 2.5vw;
  background-color: red;
  color: white;
  display: flex;
}
.img {
  width: 43px;
  height: 43px;
  margin: 8px;
}
#navbar-options {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
  margin: 0 auto;
}

.navbar-option {
  font-size: 1.5rem;
  padding: 1rem;
}

<div id="navbar">
  <img  src="https://cdn.freebiesupply.com/logos/large/2x/twitter-3-logo-png-transparent.png" alt="">
  <div id="navbar-options">
    <div ><a  href="/">Home</a></div>
    <div ><a  href="/newsfeed">Newsfeed</a></div>
    <div ><a  href="/societies">Societies</a></div>
  </div>
</div>