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

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

.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

07.12.2018 09:21

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

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

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

CSS: FlexBox

Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.

3 479

Ответы 3

Установка 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>

07.12.2018 09:33

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

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

07.12.2018 09:34

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

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

07.12.2018 14:41

Другие вопросы по теме

Наблюдатель node-sass выдает ошибку неопределенной переменной

Справка по интерполяции scss для передачи значений

Установите динамические переменные в SCSS с помощью npm

Адаптивные гибкие боксы с sass и контролем переполнения изображений

Использование переменных CSS с Calc () не работает при втором параметре

Как заставить webpack помещать простой CSS-код в тег стиля HTML-заголовка?

Можете ли вы ссылаться на функцию SASS из другого файла, не импортируя все?

Можно ли использовать rollup для обработки только css?

Наведите указатель мыши на каждую строку вложенной сетки из родительской сетки

Есть ли оптимальное правило вложения scss?

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

Ответы 3

Другие вопросы по теме

Похожие вопросы