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>

Answer 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>

Answer 3

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

对于真正居中的图像，您可以使用“高度：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
}

如何在AngularDart项目中将div图像与中心对齐？

3 个答案: