Question

我试图创建一个表单，其中提交始终位于底部和中心。

我通过在父div中使用text-align: center并使用position: absolute和bottom: 20px将其移到底部来居中，但似乎在我这样做后它会略微移动偏离中心 - 为什么会这样，我该如何解决这个问题呢？

HTML：

<div class='container'>
  <form>
    <p>
      <input name='group 1' type='radio' id='1' />
      <label for='1'>option 1</label>
    </p>
    <p>
      <input name='group 1' type='radio' id='2' />
      <label for='2'>option 2</label>
    </p>
    <p>
      <input name='group 2' type='radio' id='3' />
      <label for='3'>option 1</label>
    </p>
    <p>
      <input name='group 1' type='radio' id='4' />
      <label for='4'>option 1</label>
    </p>
    <button type='submit'>
      Submit
    </button>
  </form>
</div>

CSS：

.container {
  width: 400px;
  height: 400px;
  border: 2px solid red;
  text-align: center;
}

button {
  position: absolute;
  bottom: 20px;
}

演示：https://jsfiddle.net/f9ktLn9o/3/

Answer 1

如果您使用position: absolute;将其从堆栈中拉出，它现在位于按钮左侧的中心位置。如果你将它的宽度的50％翻译到左边，它应该可以解决问题。

transform: translateX(-50%);

https://jsfiddle.net/f9ktLn9o/4/

Answer 2

查看 Computed 样式，您会在框模型中看到left和right 位置值。
您需要使用自己的值取消设置这些值，通过一些其他调整，您将实现预期的行为。

Updated JSFiddle

代码段示范：

.container {
  width: 400px;
  height: 400px;
  border: 2px solid red;
  text-align: center;
  /* Additional */
  position: relative; /* position absolute child relative to parent */
}

button {
  position: absolute;
  bottom: 20px;
  /* Additional */
  left: 0;
  right: 0;
  display: block;
  margin: auto;
  width: 100px;
}

<div class='container'>
  <form>
    <p>
      <input name='group 1' type='radio' id='1' />
      <label for='1'>option 1</label>
    </p>
    <p>
      <input name='group 1' type='radio' id='2' />
      <label for='2'>option 2</label>
    </p>
    <p>
      <input name='group 2' type='radio' id='3' />
      <label for='3'>option 1</label>
    </p>
    <p>
      <input name='group 1' type='radio' id='4' />
      <label for='4'>option 1</label>
    </p><button type='submit'>
      Submit
    </button>
  </form>
</div>

Answer 3

试试这个而不是你的css：

button {
  position: relative;
  margin-top: 40%;
}

适用于chrome，Firefox，Edge和IE（仅测试过这些）通过使用position: absolute;，按钮在页面中固定，但不在div中固定。如果可以的话，总是尝试使用百分比而不是像素（响应式设计对最终用户来说更好）

将按钮移动到div的底部后，按钮不居中

3 个答案: