Как центрировать эту форму на большом экране?

Я строю страницу с формой, которую я хотел бы сосредоточить, однако я не мог достичь этого автоматического использования для заполнения или поля (хотя я дал форму фиксированной ширины).Как центрировать эту форму на большом экране?

Вот мой 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 и все его дети центрироваться на всех типах экранов?

источник

2017-01-03 Anis Souames

Пожалуйста, пост CSS фрагмент кода, который в настоящее время центрирования строки на небольших экранах. –

Вы хотите даже вертикально по центру? –

@DeepakBandi Нет, я хочу центрировать его по вертикали –

~~Вы должны удалить ширину на легенды/FIELDSET:~~

Добавить:

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

ОБНОВЛЕНИЕ

Если вы хотите, чтобы он был вертикально центрирован.

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

Как центрировать эту форму на большом экране?

ответ

Смежные вопросы