如何將此窗體置於大屏幕上？

我用一個表格來構建一個頁面，但是我無法使用填充或邊距的自動填充（雖然我給了表格一個固定的寬度）。如何將此窗體置於大屏幕上？

這裏是我的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一種形式。

我試着給每一個固定的寬度，並使用填充自動和邊距自動，它沒有工作。

這裏的樣式代碼（與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和它的所有孩子都集中在所有類型的屏幕上？

來源

2017-01-03 Anis Souames

請張貼當前圍繞在小屏幕上該行的CSS代碼段。 –

你甚至想要垂直居中？ –

@DeepakBandi不，我想把它垂直居中 –

~~你必須去除傳說/字段集寬度：~~

地址：

* { 
    box-sizing: border-box; 
}

這包括每一個元素的寬度填充和邊框。你總是可以只選擇表單和元素。

* { 
 
    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; 
 
    } 
 
    
 
}

<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>

UPDATE：刪除這些作品的代碼，它的工作：

來源

2017-01-03 20:50:26

在這裏你去，只是刪除寬度

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

UPDATE

如果你想讓它垂直居中。

<!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>

來源

2017-01-03 20:51:26

如何將此窗體置於大屏幕上？

回答

相關問題