@inftsukuyomi

Как выровнять видео по центру блока div?

Здравствуйте, я новичок в HTML, хочу отцентровать видео, div предал размеры body и в div вписал видео.
body{
	background-image: url(https://www.tokkoro.com/picsup/5400282-anime-hd-4k-night-scenery.jpg);
	background-size: cover;
	background-attachment: fixed;
	background-position: center center;
}
.video{
	width: 30%;
	height: 100vh;
    margin: 0 auto;
    display: block;
    text-align: center;
}


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>the end.</title>
	<link rel="stylesheet" href="style.css">
	<link rel="icon" type="image" href="https://yt3.ggpht.com/a/AGF-l78FVXS9EAPSsm1xMnreqDKnKy7kbSbyn74slA=s900-c-k-c0xffffffff-no-rj-mo">
</head>
<body>
	<div class="video">
		<iframe width="560" height="315" src="https://www.youtube.com/embed/H1Vnys_GC4Y?controls=0&amp;start=7;autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
	</div>
</body>
</html>
  • Вопрос задан
  • 84 просмотра
Решения вопроса 1
ovodovod
@ovodovod
Положите элемент <div class="video"></div> в <div class="container"></div> и для контейнера задайте следующие стили:
.container {
  display: flex;
  justify-content: center;
  align-items: center; // если нужно выравнивание по вертикали
}

Верстка:
<div class="container">
    <div class="video">
      <iframe width="560" height="315" src="https://www.youtube.com/embed/H1Vnys_GC4Y?controls=0&amp;start=7;autoplay=1" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
</div>


Про выравнивание элементов с помощью Flexbox можно почиать на HTML5Book.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
30 мар. 2020, в 20:26
25000 руб./за проект
30 мар. 2020, в 20:22
25000 руб./за проект
30 мар. 2020, в 19:06
500 руб./за проект