Как выровнять изображение div по центру в проекте angularDart? - PullRequest
Новая
       24

Как выровнять изображение div по центру в проекте angularDart?

0 голосов
/ 07 декабря 2018

Я пытаюсь выровнять изображение по центру страницы, применил следующий код, но он не сработал. 

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

Ответы [ 3 ]

0 голосов
/ 07 декабря 2018

Вы можете использовать этот пример ниже, чтобы получить гибкий контейнер для центрирования на странице 

.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>
0 голосов
/ 07 декабря 2018

Изображение уже было отцентрировано для текущей высоты, но эта высота была небольшой и была такой же большой, как изображение.При попытке придать обертке большую высоту, чтобы она не подходила точно так, как вы получаете желаемый результат.

Для действительно центрированного изображения вы можете использовать "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
}
0 голосов
/ 07 декабря 2018

Настройка 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>
...