Html iframe元素未按预期对齐_Html_Css

Html iframe元素未按预期对齐

html css

Html iframe元素未按预期对齐,html,css,Html,Css,我是CSS新手-尝试水平对齐3个iframe元素（YouTube嵌入），如下所示：左中右下面是它现在的样子：左居中右我尝试使用display:inline块但它似乎没有帮助。使用显示：块对齐它很好，虽然垂直-我需要它做水平 <!DOCTYPE html> <style> @import url('https://fonts.googleapis.com/css?family=Hepta+Slab&display=swap'); body {

我是CSS新手-尝试水平对齐3个iframe元素（YouTube嵌入），如下所示：

左中右

下面是它现在的样子：

左
居中
右

我尝试使用

display:inline块但它似乎没有帮助。
使用显示：块对齐它很好，虽然垂直-我需要它做水平
<!DOCTYPE html>

<style>

@import url('https://fonts.googleapis.com/css?family=Hepta+Slab&display=swap');

body {
    background-image: url("ice_cube_bg.jpg");
    background-size: 100%;
}

.cube {
    font-family: 'Hepta Slab', serif;
    font-size: 50px;
    font-weight: bold;
}

iframe {
    display: inline-block;
    border-radius: 10px;
}

</style>

<html>
<main>
<body>

<title>ICE CUBE</title>
<div>
    <div class="cube_text">
    <center class="cube">cube</center>
    </div>
    <div align="left">
    <iframe width="500" height="350" src="https://www.youtube.com/embed/4gyt9yqDMdA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <div align="center">
    <iframe width="500" height="350" src="https://www.youtube.com/embed/w1KkptqwfLE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
    <div align="right">
    <iframe width="500" height="350" src="https://www.youtube.com/embed/izofEX-NQEU" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
</div>

</body>
</main>
</html>


@导入url（'https://fonts.googleapis.com/css?family=Hepta+Slab&display=swap'）；
身体{
背景图片：url（“ice_cube_bg.jpg”）；
背景大小：100%；
}
.立方体{
字体系列：“七字形板”，衬线；
字体大小：50px；
字体大小：粗体；
}
iframe{
显示：内联块；
边界半径：10px；
}
冰块
立方体

外观：

它应该是什么样子：
div
元素默认情况下是display:block
，因此它们会触发新行
删除div元素。您似乎只将它们用于align
属性，该属性在1996年被CSS取代
要对齐iframe元素，请将它们放入一个显示：flex
容器中，容器中的对齐内容：间距

div{
显示器：flex；
调整内容：之间的间距
}
您可以使用display flex代替显示块
试试这个：


冰块
@导入url（'https://fonts.googleapis.com/css?family=Hepta+Slab&display=swap'）；
身体{
背景图片：url（“ice_cube_bg.jpg”）；
背景大小：100%；
}
.立方体{
字体系列：“七字形板”，衬线；
字体大小：50px；
字体大小：粗体；
}
iframe{
显示：内联块；
边界半径：10px；
}
.调整项目{
显示器：flex；
}
.添加填充{
填充：1em；
宽度：33%；
}
iframe{
宽度：100%
}
立方体