Flexbox下的内容标题

Question

你好，我想在一个视频下添加一个标题，我正在建设一个网站。我在弹性盒中使用iframe。我试着添加另一个只有文本的弹性框，我可以将文本与上面的视频对齐。我对这一切都很陌生，经过2个小时的尝试，我想看看是否有人能给我指出正确的方向。谢谢你,

.box-tricks {
display: flex;
flex-direction: row;
justify-content: space-around;
padding-top: 20px
}

<div class="box-tricks">
<iframe width="300" height="300" src="https://youtube.com/embed/BzGHbj7lquk" 
frameborder="0" allowfullscreen>></iframe>
<iframe width="300" height="300" src="https://youtube.com/embed/DGBBkqamB80" 
frameborder="0" allowfullscreen>></iframe>
<iframe width="300" height="300" src="https://youtube.com/embed/KRZtEXDeLVc" 
frameborder="0" allowfullscreen>></iframe>
</div>

Answer 1

应该将每个iframe标签包装在另一个标签中。不仅要把标题放在里面，而且要让你的CSS更干净。

提示:如果你使标签的标题为h2或' h3更好的SEO。取决于整个页面标签的顺序。

.box-tricks {
display: flex;
flex-direction: row;
justify-content: space-around;
padding-top: 20px
}

<div class="box-tricks">
<div class="iframe-wrapper">
<iframe width="300" height="300" src="https://youtube.com/embed/BzGHbj7lquk" 
frameborder="0" allowfullscreen>></iframe>
<div class="iframe-wrapper__title">MY TITLE</div>
</div>
<div class="iframe-wrapper">
<iframe width="300" height="300" src="https://youtube.com/embed/BzGHbj7lquk" 
frameborder="0" allowfullscreen>></iframe>
<div class="iframe-wrapper__title">MY TITLE</div>
</div>
<div class="iframe-wrapper">
<iframe width="300" height="300" src="https://youtube.com/embed/BzGHbj7lquk" 
frameborder="0" allowfullscreen>></iframe>
<div class="iframe-wrapper__title">MY TITLE</div>
</div>    
</div>

Answer 2

正确的方法是为iframes创建一个包装器div，并将标题放在div元素中。

.box-tricks { display: flex; flex-direction: row; justify-content: space-around;
padding-top: 20px } .title { margin-top: 20px; text-align: center; }
<div class="box-tricks">
<div>
<iframe
width="300"
height="300"
src="https://youtube.com/embed/BzGHbj7lquk"
frameborder="0"
allowfullscreen
>></iframe
>
<div class="title">title</div>
</div>
<div>
<iframe
width="300"
height="300"
src="https://youtube.com/embed/DGBBkqamB80"
frameborder="0"
allowfullscreen
>></iframe
>
<div class="title">title</div>
</div>
<div>
<iframe
width="300"
height="300"
src="https://youtube.com/embed/KRZtEXDeLVc"
frameborder="0"
allowfullscreen
>></iframe
>
<div class="title">title</div>
</div>
</div>