Html 将嵌入的Youtube视频集中在我的选项卡式内容框中_Html_Css

Html 将嵌入的Youtube视频集中在我的选项卡式内容框中

html css

Html 将嵌入的Youtube视频集中在我的选项卡式内容框中,html,css,Html,Css,我正在为一个班级学习HTML和CSS，并且必须创建一个模拟的商业/商店网站。经过一些研究和实验，我已经开始创建一个产品页面，底部有一个选项卡式信息框（单击选项卡查看说明，另一个选项卡查看规格，另一个选项卡查看介质等）。我在“媒体”选项卡中嵌入了一个YouTube视频，但我不知道如何在我创建的框中居中。我通常用来集中内容的东西似乎都不起作用，我想知道在我的CSS中，我需要做些什么才能让它起作用这是完整页面的HTML： <!DOCTYPE html> <html lang="en

我正在为一个班级学习HTML和CSS，并且必须创建一个模拟的商业/商店网站。经过一些研究和实验，我已经开始创建一个产品页面，底部有一个选项卡式信息框（单击选项卡查看说明，另一个选项卡查看规格，另一个选项卡查看介质等）。我在“媒体”选项卡中嵌入了一个YouTube视频，但我不知道如何在我创建的框中居中。我通常用来集中内容的东西似乎都不起作用，我想知道在我的CSS中，我需要做些什么才能让它起作用

这是完整页面的HTML：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>NextGen Games</title>
    <meta name="description" content="description">
    <meta name="keywords" content="keywords">
    <meta name="author" content="author">

    <link rel="stylesheet" href="main.css">
</head>

<body>
    <!-- This is where you put your content.-->
    <header>
      <h1>testtesttesttest</h1>
    </header>
    <nav>
        <a href="home.html">HOME</a>
        <a href="products.html">PRODUCTS</a>
        <a href="services.html">SERVICES</a>
        <a href="about.html">ABOUT</a>
        <a href="contact.html">CONTACT US</a>
    </nav>
    <br>
    <main>
      <div class="boxart">
        <img src="boxart.jpg" alt="game title" height="500px">
      </div>
    </main>
    <aside>
      <h2><p class="title">Game Title</p></h2>
      <p class="system">System</p>
      <p class="price">$79.99</p>
    </aside>

    <div class="tabbed">
      <input name="tabbed" id="tabbed1" type="radio" checked>
      <section>
        <h2>
          <label for="tabbed1">Description</label>
        </h2>
        <div>
          Content/description/etc
        </div>
      </section>

      <input name="tabbed" id="tabbed2" type="radio">
      <section>
        <h2>
          <label for="tabbed2">Specifications</label>
        </h2>
        <div>
          <p><span class="boldline">Platform:</span> platform</p>
          <hr>
          <p><span class="boldline">Release Date:</span> date</p>
          <hr>
          <p><span class="boldline">Developer:</span> dev</p>
          <hr>
          <p><span class="boldline">Publisher:</span> publisher</p>
          <hr>
          <p><span class="boldline">Genre:</span> genres</p>
          <hr>
          <p><span class="boldline">Number of Players:</span> #</p>
          <hr>
          <p><span class="boldline">File Size:</span> #</p>
          <hr>
          <img src="esrb" height=100px class="esrb">
          <p class="esrbtext">esrb</p>
          <p class="esrbtext">descriptors</p>
          <p class="esrbtext">etc</p>
        </div>
      </section>

      <input name="tabbed" id="tabbed3" type="radio">
      <section>
        <h2>
          <label for="tabbed3">Media</label>
        </h2>
        <div>
          <iframe width="671" height="360" src="https://www.youtube.com/embed/zw47_q9wbBE" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
        </div>
      </section>
    </div>
</body>

</html>

任何建议或帮助都将不胜感激

对齐图像和视频的常见CSS技巧是使用属性

text align

。尽管它不是直观的（相信我，大多数css都不是），但它可能是

和

标记的最简单解决方案

您可以将

style=“text align:center”

应用于

部分，或为此创建自定义id/类
另一个解决方案（可能更直观一点）是在iframe周围创建一个包装器
，并将重点放在div的中心。我注意到，您的代码中的css会影响所有div，因此它们的位置
、z-index
和显示
属性都会受到影响。这将与此解决方案冲突，因为您需要一个“重置”div。将样式添加到“我的分区”标记中非常有效。非常感谢。
body {
    width: 1000px;
    margin: 15px auto;
    background-color: #fff;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
  /* navigation bar */
nav {
  height: 40px;
  background-color: darkgrey;
  text-align: center;
}
nav a {
  display: inline-block;
  line-height: 40px;
  height: 40px;
  padding-right: 10px;
  padding-left: 10px;
  font-size: 150%;
}
nav a:link {
  color: white;
  text-decoration: none;
}
nav a:visited {
  color: white;
  text-decoration: none;
}
nav a:hover {
  background-color: #fff
}

/* product page layout */
.boxart {
  float: left;
  padding-right: 20%;
}
.title {
  text-align: right;
  font-size: 120%;
}
.system {
  text-align: right;
  margin-top: -30px;
}
.price {
  font-size: 200%;
  text-align: right;
  margin-top: -10px;
}

/* product info box */
.tabbed{
  float: left;
  width: 100%;
}
.tabbed > input {
  display: none;
}
.tabbed > input:not(:checked) + section > div {
  display: none;
}
.tabbed > section > h2 {
  float: left;
  box-sizing: border-box;
  margin: 0;
  padding: 0.5em 0.5em 0;
  overflow: hidden;
  font-size: 1em;
  font-weight: normal;
}
.tabbed > section > div {
  float: right;
  width: 100%;
  margin: 2.5em 0 0 -100%;
  box-sizing: border-box;
  padding: 0.5em 0.75em;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 0 0.5em rgba(0,0,0,0.0625);
  background: #fff;
}
.tabbed > section > h2 > label {
  cursor: pointer;
  display: block;
  padding: 0.25em 0.75em;
  border: 1px solid #ddd;
  border-bottom: none;
  border-top-right-radius: 4px;
  border-top-left-radius: 4px;
  box-shadow: 0 0 0.5em rgba(0,0,0,0.0625);
  background: #fff;
}
.tabbed > section > div {
  position: relative;
  z-index: 1;
}
.tabbed > input:checked + section > h1 {
  position: relative;
  z-index: 2;
}
.boldline {
  font-weight: bold;
}
hr {
  border-color: rgba(224,224,224,.09)
}
.esrb {
  float: left;
  padding-right: 10px;
}
.esrbtext {
  margin: 0;
}