我正在为一个类(class)学习 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;
}
如有任何建议或帮助，我们将不胜感激!
最佳答案
对齐图像和视频的常见 CSS 技巧是使用属性 text-align .尽管它不直观(相信我，大多数 css 都不是)，但它可能是 <iframe> 的最简单解决方案。和 <img>标签。
可以申请style="text-align: center"给你的section ，或为此目的创建自定义 ID/类。
另一个解决方案(可能更直观一点)是创建一个包装器 <div>围绕您的 iframe，并专注于将 div 居中。我注意到您的代码具有影响所有 div 的 css，因此它们的 position , z-index和 display属性受到影响。这将与此解决方案冲突，因为您需要一个“重置”的 div。
关于html - 在我的选项卡式内容框中将嵌入的 Youtube 视频居中，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58356802/