Question

我有复杂的表单部分，实际上并排包含两个表单。主窗体在右边，我需要这个窗体的提交按钮以形式conatiner为中心。这是我正在处理的简化版本的小提琴：

小提琴的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>

小提琴的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”的中心位置。在小提琴中，按钮需要在红色框中居中。我已经尝试在“post-form__bottom”上设置绝对位置，但这没有做任何事情。我试图弄清楚负利润，但这真的很乱，我永远无法做到正确。任何帮助将不胜感激。

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

Answer 1

以下是按钮表单居中的方法。

你不应该使用

if (getMonth && getDay && getYear) {
   // getMonth, getDay, and getYear are not null, undefined or "".
   ageCalculation();
}
else {
   // Either getMonth, getDay and getYear have a value of null, undefined or "".
}

将其更改为此按钮将以按钮形式为中心

.post-form__bottom {
   position:absolute;
}

DEMO

Answer 2

.post-form__buttons {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
}

确保.post-form__buttons（.post-form）的父级有position: relative

Answer 3

.post-form__bottom {
    position: absolute;
    text-align: center;
    width: 70%;
}

https://jsfiddle.net/as2e4d0d/11/

Answer 4

将宽度设置为100％，保留为0。

https://jsfiddle.net/as2e4d0d/6/

.post-form {
  position: relative;
  display: flex;
  border: 1px solid red;
  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;
  width: 100%;
  left: 0;
  text-align: center;
}

在窗体之外的中心表单项

4 个答案: