html - 如何将我的文本定位在 div 的顶部，而不是底部？

Question

现在它只是走到了底部。这是我的代码：

<div class="container">
  <h1 class="text-center">Machine Learning and Development</h1>
  <div style="text-align: left;">
    <!-- <video autoplay muted src="yoda.mp4" width="700px" align="right" loop preload="metadata"></video> -->
    <img src="https://via.placeholder.com/700x400?text=Placeholder+Video" />
  </div>
</div>

我希望文本出现在文本中，但它却出现在此处。（见图）：

链接到我的 HTML 和 CSS： https ://codeshare.io/5XqAeE

标签： htmlcssbootstrap-4

Answer 1

假设“机器学习与开发”是您想要在视频上方的文本，您可以使用 flexbox 来实现这一点！

<div class="container">
  <h1 class="text-center">Machine Learning and Development</h1>
  <div style="text-align: left;">
    <video autoplay muted src="yoda.mp4" width="700px" align="right" loop preload="metadata"></video>
  </div>
</div>

.container {
  display: flex;
  flex-direction: column;
}

并尝试text-align: left从保存视频的 div 中删除。