html - 在表单外的 div 中居中表单项

Question

我有一个复杂的表单部分，它实际上并排包含两个表单。主窗体在右侧，我需要将此窗体的提交按钮置于窗体容器的中央。这是我正在处理的简化版本的 fiddle :

https://jsfiddle.net/as2e4d0d/5/

fiddle 的 html:

<div class="form post-form">
  <div class="post-form__left">
    <form class="form__form" method="POST" action="#" accept-charset="UTF-8">
      <textarea type="text" class="form__input post-form__question-input" autocomplete="off" name="question" placeholder="Ask a new question"></textarea>
      <input type="submit" value="Ask" class="button button--green post-form__question-button">
    </form>
  </div>
  <div class="post-form__right">
    <form class="post-form__form" method="POST" action="#" accept-charset="UTF-8">
      <div class="form__section post-form__textarea-container">
        <textarea class="form__input post-form__textarea" type="text" name="body" placeholder="Write your entry"></textarea>
      </div>
      <div class="post-form__bottom">
        <div class="form__section form__button-row post-form__buttons">
          <input class="form__button button button--ghost" type="submit" name="type" value="Save Draft">
          <input class="form__button button button--ghost" type="submit" name="type" value="Publish">
        </div>
      </div>
    </form>
  </div>
</div>

fiddle 的 css:

.post-form {
  position: relative;
  display: flex;
  border: 1px solid black;
  height: 200px;
 }

.post-form__left {
  flex: 1 0 33.33%;
  text-align: center;
}
.post-form__right {
  flex: 3 0 66.67%;
}

.post-form__question-button {
  display: block;
  margin: auto;
}

.post-form__left textarea {
  margin: auto;
  width: 90%;
}

.post-form__right textarea {
  width: 100%;
  height: 150px;
  box-sizing: border-box;
}

.post-form__bottom {
  position: absolute;
}

我需要“post-form__bottom”div，带有“Save Draft”和“Publish”按钮，在顶层“post-form”中居中。在 fiddle 中，按钮需要在红色框中居中。我尝试在“post-form__bottom”上设置绝对位置，但那没有任何作用。我试着弄乱负利润率，但那真的很乱，我永远做不好。任何帮助将不胜感激。

解决方案将宽度设置为 100%。菜鸟错误!
https://jsfiddle.net/as2e4d0d/6/

Answer 1

这是使按钮表单居中的方法。

你不应该使用

.post-form__bottom {
   position:absolute;
}

将其更改为它将使您的按钮表单居中

.post-form__bottom {
  position: relative;
  text-align:center;
}

DEMO