Question

我正在构建一个页面，其中包含一个我想要居中的表单，但是我无法实现对填充或边距的自动化（尽管我给了表单一个固定的宽度）。

这是我的HTML结构：

<div class = "parent row">
    <div class = "child1 row">
        <form>
            <legend>
                Inputs goes here
            </legend>
            <legend>
                Inputs goes here 
            </legend>
        </form>
    </div>
    <div class = "child2 row">
        <form>
            <legend>
                Inputs goes here
            </legend>
            <legend>
                Inputs goes here 
            </legend>
        </form>
    </div>
</div>

我正在使用骨架网格系统，我有一个父div代表row并且有两个孩子：两个都有一个fieldset的表单。

我尝试为每一个提供一个固定的宽度，并使用padding-auto和margin-auto，但它不起作用。

这里的样式代码（使用SCSS）：

form{
  max-width: 400px;
  min-width: 250px;
  margin-left: auto;
  margin-right: auto;
  width: 350px;
}
legend,fieldset{
  border: 1px grey solid;
  max-width: 400px;
  padding: 0 25%;
  margin-left: auto;
  margin-right: auto;
  width: 350px;
  h4{
    background-color: $primary-blue-color;
    color: white;
    margin-bottom : 40px; 
  }
  input{
    margin: 5px;
  }
}

在小屏幕上，父div居中，但在较大的屏幕上却没有。它以标准方式对齐（从左侧开始）。

如何让这个div和所有孩子都集中在所有类型的屏幕上？

Answer 1

~~你必须删除图例/字段集上的宽度：~~

添加：

* {
  box-sizing: border-box;
}

这包括每个元素宽度的填充和边框。您始终可以只选择表单及其元素。

＆＃13;

* {
  box-sizing: border-box;
}

form {
  max-width: 400px;
  min-width: 250px;
  margin-left: auto;
  margin-right: auto;
  width: 350px;
}

legend,
fieldset {
  border: 1px grey solid;
  max-width: 400px;
  padding: 0 25%;
  margin-left: auto;
  margin-right: auto;
  width: 350px;
  
  h4 {
    background-color: $primary-blue-color;
    color: white;
    margin-bottom: 40px;
  }
  
  input {
    margin: 5px;
  }
  
}

＆＃13;

<div class="parent row">
  <div class="child1 row">
    <form>
      <legend>
        Inputs goes here
      </legend>
      <legend>
        Inputs goes here
      </legend>
    </form>
  </div>
  <div class="child2 row">
    <form>
      <legend>
        Inputs goes here
      </legend>
      <legend>
        Inputs goes here
      </legend>
    </form>
  </div>
</div>

＆＃13;

更新：删除这些代码以使其正常工作：

Answer 2

在这里，只需删除宽度

legend, fieldset {
   border: 1px grey solid;
   max-width: 400px;
   padding: 0 25%;
   margin-left: auto;
   margin-right: auto;
   /* width: 350px; */
}

<强>更新

如果您希望它垂直居中。

＆＃13;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>

        <style>
        .parent{
            height: 100vh;// give your height here
        }
        .child-wrapper{
            position          : relative;
            top               : 50%;
            -webkit-transform : translateY(-50%);
            -ms-transform     : translateY(-50%);
            transform         : translateY(-50%);
            display           : table;
            margin            : 0 auto;
        }
        form{
            max-width: 400px;
            min-width: 250px;
            margin-left: auto;
            margin-right: auto;
            width: 350px;
        }
        legend,fieldset{
            border: 1px grey solid;
            max-width: 400px;
            padding: 0 25%;
            margin-left: auto;
            margin-right: auto;
            /*width: 350px;*/
        }
        h4{
            background-color: $primary-blue-color;
            color: white;
            margin-bottom : 40px;
        }
        input{
            margin: 5px;
        }

        </style>
    </head>
    <body>
        <div class = "parent row">
            <div class="child-wrapper">
                <div class = "child1 row">
                    <form>
                        <legend>
                            Inputs goes here
                        </legend>
                        <legend>
                            Inputs goes here
                        </legend>
                    </form>
                </div>
                <div class = "child2 row">
                    <form>
                        <legend>
                            Inputs goes here
                        </legend>
                        <legend>
                            Inputs goes here
                        </legend>
                    </form>
                </div>
            </div>
        </div>
    </body>
</html>

＆＃13;

如何将这个表格放在大屏幕上？

2 个答案: