Question

我将笔记本电脑的表格集中在一起，使用此.css代码：

form{
  position: absolute;
  top: 40%;
  left: 20%;
}

结果如下：

this

但现在，当我在智能手机上播放它时，我明白了：

this

哪个不居中。

如何在Bootstrap / CSS中为每个设备设置一个表单？

Answer 1

在行类旁边添加此类：“justify-content-center”。并删除“left：20％”，如下所示：

<div class="container">
    <form>
        <div class="row justify-content-center">
            <input type="text">
            <input type="text">
            <input type="text">
        </div>
    </form>
</div>

然而，绝对位置不会成功。你可以用相对位置改变它。或者查看以下内容：How to center absolutely positioned element in div?或How to center a "position: absolute" element

Answer 2

添加（左右）res = df1.merge(df2, on=['UserId'], how='left', sort=False, indicator=True) res[res._merge == 'left_only'] = ...。

margin: auto

如果您需要上/下边距，请将其设置为form{ margin: auto; }

Answer 3

这将使用您当前的设置将表单置于中心位置：

form {
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  margin: auto;
}

但我个人会使用现有的Bootstrap类来使用Atreidex的解决方案（好吧，我个人不会使用Bootstrap，但如果我已经使用它，我会利用它的可用类而不是重新发明轮子 - 这不是你使用Bootstrap的原因吗？）。

将所有设备的表单居中：bootstrap / css

3 个答案: