Bootstrap 居中菜单元素答案

【问题标题】：Bootstrap centering menu elementBootstrap 居中菜单元素
【发布时间】：2017-02-19 07:04:57
【问题描述】：

我无法在 md 和 sm 视图中将徽标和菜单居中。

我想在菜单中为brandlogo和li的边距设置动画，因此margin auto和position absolute是nogo

TransformX 和 col-offset 有点居中，但不是像素完美，当动画边距时，徽标和菜单不会保持居中。

<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 -->

【问题讨论】：

标签： css html twitter-bootstrap twitter-bootstrap-3 twitter-bootstrap-4

【解决方案1】：

而不是这个：

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

试着把这个：

<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>

让我知道它是否有效。

【讨论】：