时间戳

首页 > 解决方案 > 使用 flexbox 使视频和输入框居中

html - 使用 flexbox 使视频和输入框居中

问题描述

我在页面中心将视频、输入框和按钮水平居中时遇到了一点问题。我已经看到一些答案说我不需要 flexbox，实际上我试图将我的边距设置为自动（以使内容在视口中间居中）无济于事。当我尝试使用 chrome 开发人员工具检查代码时，它显示我的视频、内容和表单 div 占据了视口宽度的 100%，所以这似乎是我无法居中的原因。当然，我可能是错的。我难住了。你们提供的任何帮助现在都会非常有用。如果不清楚，请告诉我。这就是我到目前为止所拥有的。谢谢，安娜

<div class="content">
<div class="video">
<h2>Want to read as fast as me? Follow the instructions below... 
</h2>
<iframe width="560" height="315" 
 src="https://www.youtube.com/embed/7SbJLfqPJgI" frameborder="0" 
 allow="accelerometer; autoplay; encrypted-media; gyroscope; 
 picture-in-picture" allowfullscreen></iframe>
 </div>
 <form>
<input type "text" placeholder="Tell us more about what books you 
like.">
<form>
</div>
<button type="submit" name="button">submit</button>
<footer>Anna Gibson @ 2018</footer>

标签： htmlcssflexbox

解决方案

好的，这就是我所做的。我这样做是为了让 'content div' 包含视频、输入框、按钮和页脚，并将它们全部以文本对齐到 'center' 。下面是我的代码示例：

HTML：

  <div class="content">
    <div class="video">
      <h2>Want to read as fast as me? Follow the instructions below...</h2>
      <iframe width="560" height="315" src="https://www.youtube.com/embed/7SbJLfqPJgI" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
    </div>
      <form>
    <input type "text" placeholder="Tell us more about what books you like.">
    <form>
     <button type="submit" name="button">submit</button>

     <footer>Anna Gibson @ 2018</footer>
      </div>

CSS：

.content {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

form {
  width: 200px;
  margin: 0 auto;
}


input{
  margin: auto;
  width: 200px;
  height: 150px;
  margin-top: 20px;
  border: 2px solid black;
}

button {
  margin-top: 40px;
  font-size: 18px;
  padding: 10px;
  text-align: center;
  background-color: #7a420a;
  color: white;
  margin: auto;
}

推荐阅读