Bootstrap Zentrierung Menüelement

Question

Ich habe Probleme mit der Zentrierung des Logos und Menüs in der md und sm Ansicht.

Ich möchte Marge von Logo der Marke und li in Menü animieren, so Marge Auto und Position absolut ist

Nogo

transformX und col-Offset irgendwie ist zentriert, aber nicht perfekt Pixel und wenn Rand das Logo und die Menü animatin bleiben nicht zentriert.

<nav class="navbar navbar-default navbar-fixed-top container menufix"> 


       <div class="row row-eq-height" id="rowmenu"> 
        <div class="row row-eq-height-resp"> 
    <!-- Brand Logo --> 
         <div class="col-xs-10 col-sm-12 col-md-12 col-lg-12"> 
          <a class="navbar-brand" id="brand-logo" href="#"> 
           <img alt="BrandLogo" class="brandlogo" src="/wp-content/themes/kdproduction/logo.png"> 
          </a> 
         </div> 
    <!-- Brand and toggle - mobile display --> 
         <div class="col-xs-2 hidden-lg hidden-md hidden-sm"> 
          <button type="button" class="btn-resp-style" data-toggle="collapse" data-target=".navbar-collapse">SVG</button> 
         </div> 
        </div> 

<!-- Main Top nav --> 
        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-8" > 
         <div class="navbar-collapse collapse"> 
           <?php wp_nav_menu(array( 
            'theme_location' => 'primary', 
            'container' => false, 
            'menu_id' => 'kdnavmenulista', 
            'menu_class' => 'nav navbar-nav navbar-header kdnavmenulista' 
             )); 
           ?> 
         </div><!-- /.navbar-collapse --> 
        </div> 
       </div> 
     </nav><!-- /.container --> 

Answer 1

Statt dessen:

<a class="navbar-brand" id="brand-logo" href="#"> 
    <img alt="BrandLogo" class="brandlogo" src="/wp-content/themes/kdproduction/logo.png"> 
</a> 

versuchen und setzen diese:

<div style="width:100%; display:flex; justify-content:center; align-items:center;"> 
    <a class="navbar-brand" id="brand-logo" href="#"> 
     <img alt="BrandLogo" class="brandlogo" src="/wp-content/themes/kdproduction/logo.png"> 
    </a> 
</div> 

Lassen Sie mich wissen, ob es funktioniert.