フォーム外のdivの中央フォーム項目

Question

私は実際には2つのフォームを並べて含む複合フォームセクションを持っています。メインフォームは右側にあり、私はこのフォームの送信ボタンをconatinerのフォームの中央に配置する必要があります。

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

フィドルの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が必要です。 "Draft Save"ボタンと "Publish"ボタンは、トップレベルの "ポストフォーム"の中央に配置してください。フィドルでは、ボタンは赤いボックスの中央に配置する必要があります。 Iveは "post-form__bottom"で絶対位置を設定しようとしましたが、それは何もしませんでした。私は負のマージンでぶち壊してみましたが、それは本当に乱雑になってしまいました。どんな助けもありがとう。

解決策 幅を100％に設定します。ルーキーミス！

Answer 1

100％に設定幅、 `ポストform__bottom`ため、どの位置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; 
} 

Answer 2

ここでボタンのフォームを中央に配置する方法があります。

あなたは持ってい

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

DEMO

Answer 3

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

.post-form__buttons（.post-form）の確認親を作成し、それはあなたのボタンの形を中心に説明するこれに

.post-form__bottom { 
    position:absolute; 
} 

変更、それを使用しないでくださいposition: relative

Answer 4

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

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