如何在导航条上居中对齐图像，以及如何在小型设备上向左移动图像以适应内容

Question

我有一个透明的logo图像。如何在固定导航条上将徽标图像对齐到中心，然后在较小的设备上将其稍微向左移动，以便右边的内容可以容纳在导航条上?

我试过background-size: cover，但使图像响应和标志被切断。我尝试了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上不太好用。

锚标记的任何一侧都有轻微的间隙(可能是半像素间隙)，我已经尝试了这里提到的解决方案:css flex布局在某些ipad上不起作用，但它不起作用。

你知道如何消除间隙吗?

Answer 1

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

Answer 2

try this:

ul li {
    height: 180px;
    width: 180px;
    background: #f6304c;
    display: block;
    color: #ffffff;
    text-align: center;
    margin: 2% 0 0 30%;
    padding: 50px 0;
}

移动设备

 @media screen and (min-width: 678px) {
        ul li {
            height: 180px;
            width: 180px;
            background: #f6304c;
            display: block;
            color: #ffffff;
            text-align: center;
            float:left;
           / margin: 2% 0 0 30%;*/
            padding: 50px 0;
        }
    }

Answer 3

使用

.brand-logo {
    background: url(https://i.imgsafe.org/1963cc1736.png) left center no-repeat;
    background-size: contain;
    background-position: center;
    background-color: #266224;
    height: 100%;
}

你唯一要做的就是用颜色填充logo中的O，因为它是透明的XD