导航栏列表中的中心徽标

Question

CODEPEN: https://codepen.io/tylerisfatal/pen/vYgmaxJ

I have built a simple navbar with a list of icons and a logo inside the element but outside the element. This is sort of a two-part question:

1. How do I center this element? It's parent is the nav element, yet I can't seem to center it. I tried margin: 0 auto but it only centered it near the end of the flex container.

2. Is doing it this way (the logo inside the nav yet outside the ul) the most efficient way to write this?

HTML:

 <nav role="navigation" class="main-nav">
        <ul class="main-nav-list">
            <li class="fb">
                <a href="#facebook">
                    <img src="https://cdn3.iconfinder.com/data/icons/capsocial-round/500/facebook-512.png" alt="">
                </a>
            </li>
            <li>
                <a href="#yelp">
                   <img src="https://cdn3.iconfinder.com/data/icons/social-media-2169/24/social_media_social_media_logo_yelp-512.png" alt="">
                </a>
            </li>
            <li>
                <a href="#linkedin">
                    <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_color-512.png" alt="">
                </a>
            </li>
        </ul>
    </nav>

CSS:

/* navbar Container */
.main-nav {
    display: flex;
    background-color: rgb(28, 143, 124);
    align-items: center;
    height: auto;
    width: auto;
}

/* ul Container*/
.main-nav 
.main-nav-list {
    display: flex;
    margin-right: auto; /* img placement */
    justify-content: flex-end;
    flex-direction: row;
    list-style-type: none;
}

/* Responsive images */
.main-nav 
.main-nav-list li img {
    display: flex;
    height: auto;
    width: auto;
    max-height: 150px;
    max-width: 75px;
}

/* Logo */

.main-nav .logo {
  display: flex;
  height: auto;
  width: auto;
  max-height: 150px;
  max-width: 75px;
  margin: 0 auto;
}

Answer 1

Put your nav with certain width in container with body width

.container {
  width: 100%;
  background: rgb(28, 143, 124);
}
.main-nav {
  margin: 0 auto;
  width: 500px;
    display: flex;
    background-color: rgb(28, 143, 124);
    align-items: center;
    height: auto;
    
} 

Visit https://codepen.io/losrios1337/pen/mdRmjGL !

Answer 2

Just copy paste this into your given codepen. I guess this is what you needed

/* navbar Container */
    .main-nav {
        display: flex;
        background-color: rgb(28, 143, 124);
        align-items: center;
        height: auto;
        width: auto;
    }
    
    /* ul Container*/
    .main-nav 
    .main-nav-list {
        display: flex;
    /*     margin-right: auto;  */
      /* img placement */
        justify-content: flex-end;
        flex-direction: row;
        list-style-type: none;
      margin-right: auto;
      margin-left: auto;
    }
    
    /* Responsive images */
    .main-nav 
    .main-nav-list li img {
        display: flex;
        height: auto;
        width: auto;
        max-height: 150px;
        max-width: 75px;
    }
    
    /* Logo */
    
    .main-nav .logo {
      display: flex;
      height: auto;
      width: auto;
      max-height: 150px;
      max-width: 75px;
    /*   margin: 0 auto; */
    }

updated codepen

Answer 3

You could simply put a common wrapper div around your logo:

<div class="logo-wrapper">
    <img src="https://cdn2.iconfinder.com/data/icons/icontober/64/Inkcontober_Deep_Dive_Suit-512.png" alt="" class="logo">
</div>

and position the logo with this css:

.logo-wrapper {
    display: flex;
    justify-content: center;
    width: 20%;
}

The logo wrapper gets 20% width, the ul container 40% width and both are per default flex-start-justified. So the logo wrapper is centered and also justifies its own content centered – so the logo itself is centerd.

Working example (click 'Full Page' to compare):

 .main-nav { display: flex; align-items: center; background-color: rgb(28, 143, 124); } /* ul Container*/.main-nav-list { box-sizing: border-box; display: flex; list-style-type: none; width: 40%; } /* Logo wrapper */.logo-wrapper { display: flex; justify-content: center; width: 20%; } /* Responsive images */.main-nav img { max-height: 150px; max-width: 75px; }.main-nav img:hover { transform: scale(1.05); }

 <nav role="navigation" class="main-nav"> <ul class="main-nav-list"> <li class="fb"> <a href="#facebook"> <img src="https://cdn3.iconfinder.com/data/icons/capsocial-round/500/facebook-512.png" alt=""> </a> </li> <li> <a href="#yelp"> <img src="https://cdn3.iconfinder.com/data/icons/social-media-2169/24/social_media_social_media_logo_yelp-512.png" alt=""> </a> </li> <li> <a href="#linkedin"> <img src="https://cdn3.iconfinder.com/data/icons/free-social-icons/67/linkedin_circle_color-512.png" alt=""> </a> </li> </ul> <div class="logo-wrapper"> <img src="https://cdn2.iconfinder.com/data/icons/icontober/64/Inkcontober_Deep_Dive_Suit-512.png" alt="" class="logo"> </div> </nav>

Answer 4

not quite sure what you mean by this "inside the element but outside the element". I guess you mean inside the nav bar but outside of the ul element. If so, then you can add this to your.logo class:

position: fixed;
right: 50%;