[英]How can I put an element to right of a centered element?
I have two inputs ("email" and "password") centered horizontally. 我有两个输入(“电子邮件”和“密码”)水平居中。 Now, I want to put an item to right of them, but keeping them (email and password) centered.
现在,我想在它们的右边放置一个项目,但要使它们(电子邮件和密码)居中。
<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>
If I remove <button>
, inputs are centered when I put the button all three items are centered, but I just want center email
and password
inputs. 如果删除
<button>
,则当我将按钮的所有三个项目都居中时,输入将居中,但是我只想将email
和password
输入居中。
The easiest way would just be to give the element you want on the right position: absolute
(to take it out of the flow) and then use left
and top
to position it where you want it (noting that these values can be percentage-based). 最简单的方法是将所需的元素放在正确的
position: absolute
(将其从流程中移出),然后使用left
和top
将其放置在所需的位置(请注意,这些值可以基于百分比)。 This means you may have to play around with values to get it exactly where you want it, but will keep the other element in the vertical center: 这意味着您可能必须尝试使用值才能将其准确地获取到所需位置,但将其他元素保持在垂直中心:
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>
I would change a bit your code. 我会更改您的代码。 This answer asumes that you want the bellow the fields and right aligned.
该答案假定您要在下面将字段和右边对齐。
Like this. 像这样。
<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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.