html - 在标题中居中图像，也使全 Angular

Question

几个小时以来，我一直在尝试让 Logo 居中并在我的全局页眉顶部全 Angular 显示。似乎无法弄清楚。我在购物车软件程序中工作，可能没有编辑正确的东西...

HTML:

<div id="mainContainer" class="container">
    <header id="header"> 
        <div id="logo">
            <!--START: global_header-->
            <h1 class="store-name">[storename]</h1>
            <h3 class="store-slogan">[storeslogan]</h3>
            <!--END: global_header-->
        </div>

CSS:

#logo {
    max-width: 100%;
    height: 100%;
    overflow: hidden;
}
#logo img {
    left: 0;
    top: 0;
    bottom: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: 100%;
    max-height: 100%;
}

Answer 1

我在 Plunker 上创建了一个示例。使用您为标题 div 设置的 ID，您还可以添加背景图片 URL 以及背景的位置。不确定您想要文本的位置。

#header {
  text-align: center;
   background-image: url('http://placehold.it/360x65');
   background-position: center; 
}


https://plnkr.co/edit/7Gpf8kePPXQ4MfoSXVKh?p=preview