时间戳

首页 > 解决方案 > 在我的选项卡式内容框中将嵌入的 Youtube 视频居中

html - 在我的选项卡式内容框中将嵌入的 Youtube 视频居中

问题描述

我正在为一堂课学习 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。

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;
}

任何建议或帮助表示赞赏！

标签： htmlcss

解决方案

对齐图像和视频的一个常见 CSS 技巧是使用属性text-align. 尽管它不直观（相信我，大多数 css 不是），但它可能是<iframe>和<img>标签最简单的解决方案。

为此，您可以应用style="text-align: center"到您的section，或创建自定义 id/类。

另一个解决方案（可能更直观一点）是<div>在 iframe 周围创建一个包装器，并专注于 div 居中。我注意到您的代码具有影响所有 div 的 css，因此它们的position,z-index和display属性受到影响。这将与此解决方案相冲突，因为您需要一个“重置”的 div。

推荐阅读