css - 如何在AngularDart元素中将div图像与中心对齐？

Question

我正在尝试将图像对齐页面的中心，应用了以下代码，但是没有用。

.home-banner { 
text-align: center;
} .banner-image { 
display: inline-block; 
}

如何将其与页面中心对齐。

app_component.html

<div class="home-banner">
    <div class="banner-container">
      <div class="banner-image"></div>
    </div>
</div>

app_component.scss

@import 'package:angular_components/css/material/material';

$home-banner-image: 'https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png';

.home-banner {
   display: flex;
    flex-direction: column;
    justify-content: center;
}    
.banner-image {
      width: 100%;
      height: 100%;
      background-image: url($home-banner-image);
      background-repeat: no-repeat;
    }

Answer 1

在背景图片上设置background-position: center;应该可以解决该问题。

.home-banner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.banner-image {
    width: 100%;
    height: 100%;
    min-height: 150px; /* Added to show image */
    background-image: url('https://via.placeholder.com/350x150');
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
}

<div class="home-banner">
    <div class="banner-container">
      <div class="banner-image"></div>
    </div>
</div>