如何使用 CSS 在页脚中将此表单居中？答案

【问题标题】：How Can I center this form inside my Footer using CSS?如何使用 CSS 在页脚中将此表单居中？
【发布时间】：2019-11-21 22:06:19
【问题描述】：

我的页脚中有一个堆叠列表和一个表单，我希望列表向左浮动，我希望表单位于页面的中心如何在我的 css 文件中执行此操作？

footer a {
  margin-left: 100px;
  margin-bottom: 18px;
  display: block;
}

form {
  float: center;
}

<footer>
  <a href="#">Home</a>
  <a href="#">Where To stay</a>
  <a href="#">Transportation</a>
  <a href="#">Island Activities</a>
  <a href="#">FAQ</a>

  <form>
    Email Newsletter:
    <br>
    <input type="text" name="Email" Value="">
    <br>
    <input type="submit" value="Sign Up">
  </form>
</footer>

【问题讨论】：

没有float: center这样的东西
text-align:center 会起作用吗？
" 向左浮动，我希望表单位于页面的中心" - 那么哪个？屏幕中心是一个地方，那么你想要它在哪里？水平居中，垂直居中？
我希望列表保持在页脚的左侧，而表单位于页脚的中心

标签： html css forms

【解决方案1】：

我想你可以试试这个方法。希望这对你有用。

.footer-list {
  margin-bottom: 18px;
  width: 35%;
  float: left;
}

.footer-form {
  width: 65%;
  margin-left: 15%;
}

li {
  list-style: none;
}

form {
  padding: 10px;
}

<footer>
  <div class="footer-list">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Where To stay</a></li>
      <li><a href="#">Transportation</a></li>
      <li><a href="#">Island Activities</a></li>
      <li><a href="#">FAQ</a></li>
    </ul>
  </div>
  <div class="footer-form">
    <form>
      Email Newsletter:
      <br>
      <input type="text" name="Email" Value="">
      <br>
      <input type="submit" value="Sign Up">
    </form>
  </div>

</footer>

【讨论】：

【解决方案2】：

试试下面的代码

/* Try this*/

footer{
text-align:center;
border: 1px solid #80808017;
}

<footer>
  <a href="#">Home</a>
  <a href="#">Where To stay</a>
  <a href="#">Transportation</a>
  <a href="#">Island Activities</a>
  <a href="#">FAQ</a>

  <form>
    Email Newsletter:
    <br>
    <input type="text" name="Email" Value="">
    <br>
    <input type="submit" value="Sign Up">
  </form>
</footer>

【讨论】：

【解决方案3】：

有一个名为text-align 的CSS 属性。您可以使用它来将文本与页面中心对齐。

尝试将以下代码添加到您的 sn-p text-align: center;。为了使表单与列表一致，我认为最好的方法是使用flexbox。尝试将display: flex; 添加到您的页脚：

footer a {
  /*margin-left: 100px; /*<-- When using flexbox and using justify-content, you might not be needing this*/
  margin-bottom: 18px;
  display: block;
}

form#center {
  text-align: center;
}

footer#flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  justify-content: space-around;
}

<footer id="flex">
  <div>
    <a href="#">Home</a>
    <a href="#">Where To stay</a>
    <a href="#">Transportation</a>
    <a href="#">Island Activities</a>
    <a href="#">FAQ</a>
  </div>

  <form id="center">
    Email Newsletter:
    <br>
    <input type="text" name="Email" Value="">
    <br>
    <input type="submit" value="Sign Up">
  </form>
</footer>

还有许多其他不同的方法可以使元素居中（例如margin-left: auto; + margin-right: auto; 技术）：

footer a {
  margin-left: 100px;
  margin-bottom: 18px;
  display: block;
}

form#center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 175px; /*<-- requires a fixed width though*/
}

<footer>
  <a href="#">Home</a>
  <a href="#">Where To stay</a>
  <a href="#">Transportation</a>
  <a href="#">Island Activities</a>
  <a href="#">FAQ</a>

  <form id="center">
    Email Newsletter:
    <br>
    <input type="text" name="Email" Value="">
    <br>
    <input type="submit" value="Sign Up">
  </form>
</footer>

【讨论】：

好的，现在它把表格放在中心，所以它正在工作，但它在列表下，我有没有办法让它不在列表下但与它保持一致？
@DathonWeber 是的，有多种方法可以做到这一点。我使用display: flex; 对此答案进行了编辑。详情请看我的回答。
@DathonWeber 很高兴看到它有效，请投票并留下标记，以便每个人都可以看到这个答案也可能对其他人有所帮助。

【解决方案4】：

首先，您应该将列表放在另一个 div 中：

<footer>
<div class="list">
  <a href="#">Home</a>
  <a href="#">Where To stay</a>
  <a href="#">Transportation</a>
  <a href="#">Island Activities</a>
  <a href="#">FAQ</a>
</div>

<form>
 Email Newsletter:
 <br>
 <input type="text" name="Email" Value="">
 <br>
 <input type="submit" value="Sign Up">
 </form>
</footer>

然后将页脚的宽度设置为 100%：

footer { width: 100%; }

然后定位它们：

.list { display: inline-block;
        float:left;}
form {margin:0 auto;}

【讨论】：