如何在 angularDart 项目中将 div 图像与中心对齐？答案

【问题标题】：How do I align the div image to the center in an angularDart project?如何在 angularDart 项目中将 div 图像与中心对齐？
【发布时间】：2019-05-08 23:51:28
【问题描述】：

我正在尝试将图像与页面中心对齐，应用了以下代码但它不起作用。

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

【问题讨论】：

标签： css sass dart angular-dart dart-html

【解决方案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>

【讨论】：

【解决方案2】：

您可以使用下面的示例来实现 flex 容器以页面为中心

.container{
  width:100%;
	display:flex;
	flex-wrap:wrap;
	text-align:center;
  justify-content: center;
}
.box{
	width:100%;
	max-width:30%;
	border:1px solid red;
	margin:5px;
}

<section class="container">
	<div class="box">
		<h1>This is the first box</h1>
		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci voluptates, aut totam eaque possimus molestiae atque odio vero optio porro magni, quis culpa ea. Perferendis, neque, enim. Rem, quia, quisquam.</p>
	</div>

	</div>

【讨论】：

【解决方案3】：

图片已经以当前高度为中心，但该高度很小，与图片图像一样大。当试图给包装器一个更大的高度时，它并不完全适合你得到想要的输出。

对于真正居中的图像，您可以使用“height: 100vh”来获取所有视图高度。希望对你有帮助:)

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

.banner-container {
  align-self: center;
}

.banner-image {
    width: 50px;
    height: 50px;
    min-height: 150px; /* Added to show image */
    background-color: black
}

【讨论】：