Question

所以我正在制作一个关于ghack游戏社区名称的视频网页

到目前为止，我刚刚遇到一个问题。我无法将我嵌入的youtube视频集中在一起（它只是一个随机测试视频，我还没有制作真正的视频）

我希望视频在我所说的“欢迎新一代”的文字下面。太过分了。我怎样才能让它更加居中

这是我的CSS，其中一些是我没有使用或没有相关的

body{
        background-color:black;
    }



    .logo{
        width: 50%;
        border-width: 10px;
        text-align: center;
        margin: 0 auto;
        background-color: red;
    }


    .h1{
        size:50px;
        color: red;
        text-align: center;

    }

    .divYT{
        margin: 0 auto;
        width: 50%;


    }

这是我的HTML

    <<!DOCTYPE html>
<html>
<head>
    <title>
    GHack
    </title>
    <link rel="stylesheet" type="text/css" href="mystylee.css"> 
</head>
<body>

<div class="logo">
    <img src="https://i.imgur.com/qoJbVdY.png" alt="G-HACK" height="150">
</div>

<div class="divA">
    <h1 class="h1">Welcome To the new genaration  </h1>
<div>
<!-- replace video with youtube video that shows off the  in the div under this comment  -->

</div class="divYT">
    <iframe align=center width="560" height="315" src="https://www.youtube.com/embed/GEWkjYssiCw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>


</body>

</html>

这是我的网页图片，用于显示我希望视频在哪里http://prntscr.com/icsjux

绿色框是我想要视频的地方，蓝色框是视频的位置

Answer 1

由于iFrame具有固定的宽度，因此您可以为包装<div>元素（<div class="divYT">）提供以下CSS规则：

.divYT {
  width: 560px;
  margin: auto;
}

这将使包装元素具有与视频相同的宽度，并从左右两侧产生相等的边距，这将导致包裹元素居中。

如何将嵌入的YouTube视频集中在中

1 个答案: