如何将元素放在居中元素的右边？

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>