@SaddledSharp

Как выровнять картинку ровно по центру (вертикально)?

Есть наглядный пример:
Сайт: google.com (не пиар :D)
Как видим, у него лого расположено по середине, как такое сделать мне? У меня есть код:
<header class="search">
		<div class="container">
			<img src="images/logo.png" alt="Loading image..." class="google-image">
		</div>
	</header>

CSS:
header {
	width: 930px;
	margin: 0 auto;
}
  • Вопрос задан
  • 155 просмотров
Решения вопроса 1
HunteR-VRX
@HunteR-VRX
frontend-разработчик
.container {
    margin-top: 45vh;
}


Значение может быть и не 45, а в интервале 45-48, зависит от величины вашего лого, поэтому подбирайте точечно в Вашем случае

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

.container {
    padding-top: 45vh;
}

Ответ написан
Пригласить эксперта
Ответы на вопрос 1
AlexeewAlex
@AlexeewAlex
header div{
    display: flex;
    justify-content: center;
    align-items: center;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы