Question

在将我的视频，输入框和按钮水平居中放置在页面中心时，我遇到了一些问题。我已经看到一些答案，说我不需要flexbox，实际上我试图将边距设置为auto（将内容居中放置在视口中间）无济于事。当我尝试使用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>

Answer 1

好的，这就是我所做的。我这样做是为了使“内容div”包含视频，输入框，按钮和页脚，并将它们全部对齐到“居中” 。下面是我的代码示例：

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;
}

使用flexbox将视频和输入框居中

1 个答案: