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

我会稍微更改您的代码。该答案假定您要在下面将字段和右边对齐。

喜欢这个。

import pandas as pd
from sklearn.preprocessing import MinMaxScaler

scaler = MinMaxScaler()

columns = ['301', '341', '342'] 
df[columns] = scaler.fit_transform(df[columns])

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

2 个答案: