Question

我想将图像添加到导航栏标题中，以便在标题链接旁边进行调整。但是，由于图像的大小较大，因此图像会增加并在其他标题链接上留出空间。我如何保持链接居中？

    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header logo">
          <a href="#" class="navbar-left"><img src="img/logo_png_solo.png"></a>
        </div>
        <ul class="nav navbar-nav">
          <li><a href="main" class="mwc-font-med">Home</a></li>
          <li><a href="cards/membership.php" class="mwc-font-med">Membership</a></li>
          <li><a href="main" class="mwc-font-med">Contact</a></li>
          <li><a href="faq" class="mwc-font-med">FAQ</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li><a href="#" class="mwc-font-med">Register</a></li>
          <li><a href="#" class="mwc-font-med">Login</a></li>
        </ul>
      </div>
    </nav>

没有图像：

有图像：

Answer 1

尝试使用导航栏品牌

<div class="col-md-11 col-sm-12  text-left-xs text-left-sm ">
                        <div class="bar__module" >
                            <ul class="menu-horizontal ">
                                <li class="dropdown dropdown--hover "><a href="/motors/shop.aspx">Shop</a><span class="dropdown__trigger"></span>
                                    <div class="dropdown__container">
                                        <div class="container">
                                            <div class="row">
                                                <div class="dropdown__content col-md-12 text-left" style="background: linear-gradient(#E9E9E9, #ffffff);">
                                                    <div class="col-md-3 hidden-xs ">
                                                        <img alt="" src="../photosvideos/sidewindernewpics/Sw shield side copy.png" style="margin-bottom: -18px;" />
                                                    </div>
                                                    <div class="col-md-3 text-left">
                                                        <h5>Products</h5>
                                                        <ul class="menu-vertical">
                                                            <li><a href="/motors">About The Sidewinder</a></li>
                                                            <li><a href="/motors/shop.aspx">Shop</a></li>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </li>

Answer 2

那是因为您的徽标没有填充，但是导航栏中的文本却具有填充。只需在包含图片的div上添加10-15像素之间的填充

图像将导航栏列表上移（未居中）

2 个答案: