Question

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

我尝试了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 layout not working on some iPads但它不起作用。

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

Answer 1

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

Answer 2

试试这个：

 @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;
        }

    }

用于移动设备

data=reshape(1:24,2,3,4)

如何在导航栏和小型设备上对齐图像将其向左移动以适合内容？

2 个答案: