html - 如何在导航栏上居中对齐图像，对于小型设备如何将其向左移动以适应内容？

Question

我有一个带有一些透明度的 Logo 图像。如何将 Logo 图像与固定导航栏的中心对齐，然后在较小的设备上将其稍微向左移动，以便右侧的内容适合导航栏？

我已经尝试过 background-size: cover 但是使图像响应并且 Logo 被切断。我尝试了 background-size: contain 但后来我在较大的设备上失去了导航栏的背景颜色。

有什么方法可以将图像移动到 html 中以实现我的需要吗？

这是我对 plnkr 的尝试: https://plnkr.co/edit/Uij12vHwFuaeAS91nYUL?p=preview

谢谢

更新:

我正在尝试一种不同的方法并将图像移动到 html 中并尝试使用 css flexbox 方法。快到了，但需要消除差距。

HTML:

<nav class="navbar navbar-fixed-top">
      <div class="search">
        <i class="fa fa-search"></i>
      </div>
      <a class="brand-logo" href="#/">
        <img src="https://i.imgsafe.org/1963cc1736.png" />
      </a>
      <aside>
       <figure class="account-balance">
         <span>de 88,980.7740</span>
         <i class="fa fa-user"></i>
        </figure>
      </aside>
    </nav>

CSS

nav.navbar {
border: 0;
color: #FFF;
height: 40px;
min-height: 40px;
z-index: 1;
display: 0;
-webkit-box-pack: justify;
-moz-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}

.search,.filler,aside,figure {
    height: 100%;
}

.search,.filler,aside {
    background: #266224;
    float: left;
}

.search,aside {
    flex-grow: 1;
    -webkit-flex: 1;
}

.search .fa-search,figure > span {
    display: inline-block;
    margin-top: 12px;
}

.search {
    padding: 0 12px;
}

.brand-logo img {
    height: 40px;
    max-width: 100%;
}

figure {
    float: right;
}

figure.account-balance {
    padding-right: 12px;
}

figure > span {
    line-height: 25px;
    margin-top: 8px;
    padding-right: 5px;
}

这是使用 flexbox 的修改版本: https://embed.plnkr.co/wSWpIDIoJOiSQYVvwHMU/

这确实接近于解决问题，但是，这在 iPhone 6 和旧 iPad 上效果不佳。

anchor 标签的两边有一点缝隙(可能是半个像素的缝隙)，我试过这里提到的解决方案:css flex layout not working on some iPads但它不起作用。

你知道消除差距的方法吗？

Answer 1

尝试为不同的设备宽度编写指定的样式using this .