Как выровнять 3 видео по центру страницы (все они будут на одной горизонтали)?

Question

[alexbog90]

<h2 align="center"><a name="My Media"> My Media </a></element></h2>

<article style="width:1920px; height:1080px; margin:0 auto;";>

<table>
<tr>

<td>
<section>
<iframe align="center" width="90%" src="https://www.youtube.com" allowfullscreen frameborder="0" style="padding:30px"></iframe>
</section>
</td>

<td>
<section>
<iframe align="center" width="90%" src="https://www.youtube.com" allowfullscreen frameborder="0" style="padding:30px"></iframe>
</section>
</td>

<td>
<aside>
<iframe align="center" width="90%" src="https://www.youtube.com" allowfullscreen frameborder="0" style="padding:30px"></iframe>
</aside>
</td>

</tr>
</table>
</article>

Comments

[Rustam Bainazarov]

Табличная верстка в 2019-м году.

Вы не из 2003-го?

[xonar]

Рустам Байназаров, Хуже, он из будущего)))

[alexbog90]

Рустам Байназаров, это просто кусок кода, в нем я использовал тег table, чтобы расположить видео горизонтально. По другому не умею)

[Ankhena]

Читайте про флексы https://html5book.ru/css3-flexbox/ и вообще про выравнивание другими способами https://learn.javascript.ru/css-center

Answer 1

[Lord_Dantes]

Я бы сделал это следующим образом:
Родитель у которого есть 3 дочерних элемента это наши video.
Родителю display: flex; justfiy-content: space-beetwen; align-items: center;
И все :)

Comments

[alexbog90]

Все равно не работает)

<!-- My Media start-->
	
	<h2 align="center"><a name="My Media"> My Media </a></element></h2>
	
		<article style="width:100%; display:flex; justfiy-content:space-beetwen; align-items:center; margin:0 auto";>
			<table>
				<tr>
					<td>
						<section>
							<iframe src="https://www.youtube.com/embed/Q6_5InVJZ88" allowfullscreen frameborder="0" style="margin:30px"></iframe>
						</section>
					</td>
					<td>
						<section>
							<iframe src="https://www.youtube.com/embed/Q6_5InVJZ88" allowfullscreen frameborder="0" style="margin:30px"></iframe>
						</section>
					</td>
					<td>
						<aside>
							<iframe src="https://www.youtube.com/embed/Q6_5InVJZ88" allowfullscreen frameborder="0" style="margin:30px"></iframe>
						</aside>
					</td>
				</tr>
			</table>
		</article>
		
	<!-- My Media end-->