如何將元素放在居中元素的右邊？

Question

我有兩個輸入（“電子郵件”和“密碼”）水平居中。 現在，我想在它們的右邊放置一個項目，但要使它們（電子郵件和密碼）居中。

<div style={{ display: "flex", justifyContent: "center" }}>
    <div className="col-md-6 row">
        <div className="col-md-6">
            <input placeholder="email" />
        </div>
        <div className="col-md-6">
            <input placeholder="password" />
        </div>
    </div>
    <button text="Entrar" />
</div>

如果刪除<button> ，則當我將按鈕的所有三個項目都居中時，輸入將居中，但是我只想將email和password輸入居中。

Answer 1

最簡單的方法是將所需的元素放在正確的position: absolute （將其從流程中移出），然后使用left和top將其放置在所需的位置（請注意，這些值可以基於百分比）。 這意味着您可能必須嘗試使用​​值才能將其准確地獲取到所需位置，但將其他元素保持在垂直中心：

 button { position: absolute; top: 5%; left: 75%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <div style='display: flex; justify-content: center;'> <div class="col-md-6 row" style='background-color: yellow;'> <div class="col-md-6"> <input placeholder="email" /> </div> <div class="col-md-6"> <input placeholder="password" /> </div> </div> <button>Entrar</button> </div> 

Answer 2

我會更改您的代碼。 該答案假定您要在下面將字段和右邊對齊。

像這樣。

 <div style={{ display: "flex", justifyContent: "center" }}>
 <div className="col-md-6 row">
     <div className="col-md-6">
         <input placeholder="email" />
     </div>
     <div className="col-md-6">
         <input placeholder="password" />
     </div>
 </div>
 <div className="col-md-6 row">
     <button class="pull-right" text="Entrar" />
 </div>