Центрировать форму на странице как вертикально, так и горизонтально - PullRequest
Новая
       18

Центрировать форму на странице как вертикально, так и горизонтально

0 голосов
/ 12 февраля 2020

Я бы хотел центрировать форму на странице, и мне удалось это сделать. Однако у меня есть проблема: когда я изменяю размер браузера windows и высота уменьшается, я хотел бы, чтобы форма оставалась ниже панели навигации, а страница переполнялась и позволяла мне прокручиваться, чтобы увидеть остальную часть формы , Вместо этого он располагается над панелью навигации.

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

#navbar {
  background-color: blue;
  width: 100%;
  height: 50px;
  border: 1px solid black;
}

.test_form {
  /* Center the form on the page vertically */
  margin: 0 auto;
  /* Center both vertically and horizontally */
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  /* Center both vertically and horizontally */
  min-width: 400px;
  width: 28vw;
  max-width: 550px;
  /* Form outline */
  padding: 1em;
  border: 2px solid #192D4D;
  border-radius: 2em;
}

@media only screen and (max-height: 500px) {
  .test_form {
    /* Center the form on the page vertically */
    margin: 0 auto;
    min-width: 400px;
    width: 28vw;
    max-width: 550px;
    /* Form outline */
    padding: 1em;
    border: 2px solid #192D4D;
    border-radius: 2em;
    /* Just to know when it switches */
    background-color: red;
  }
}

label {
  /* Uniform size & alignment */
  display: inline-block;
  width: 100px;
  text-align: center;
}

input,
textarea {
  /* To make sure that all text fields have the same font settings
     By default, textareas have a monospace font */
  font: 1em sans-serif;
  /* Uniform text field size */
  width: 100%;
  box-sizing: border-box;
  /* Match form field borders */
  border: 1px solid #999;
  background-color: #F1F9FF;
}

textarea {
  /* Align multiline text fields with their labels */
  vertical-align: top;
}

table {
  width: 100%;
  border-collapse: collapse;
  border: 2px solid #192D4D;
  letter-spacing: 1px;
  font-size: 0, 8rem;
  text-align: center;
  background-color: #ADBEDA;
}

td,
th {
  border: 1px solid #5C6F8C;
  padding: 5px 10px;
  text-align: left;
}

.submit-button {
  margin-left: calc(1em + 2vw);
  min-width: 100px;
  width: 8vw;
  max-width: 150px;
}
<div id='navbar'>

</div>

<br>
<form class="test_form">
  <table border="1">
    <thead>
      <tr>
        <th colspan="2" scope="row">Table form</th>
      </tr>
    </thead>
    <tr>
      <th>asdasd</th>
      <td>asdad</td>
    </tr>
    <tr>
      <th>asdasd</th>
      <td><input value='asda'></td>
    </tr>
    <tr>
      <th>asdasd</th>
      <td>asdad</td>
    </tr>
    <tr>
      <th>asdasd</th>
      <td><textarea>asdads</textarea></td>
    </tr>
  </table>
  <br>
  <input class="submit-button" type="submit" value="Submit" />
</form>

CSS ниже @media - это код, который я использовал ранее, который центрировал форму только по горизонтали, но имел желаемое поведение относительно вертикального положения (оставайтесь ниже панели навигации и переполнения).

https://jsfiddle.net/o4u28qxv/1/

Ответы [ 4 ]

1 голос
/ 12 февраля 2020

Добавьте position: static; и transform: none; к правилу для .test_form в медиа-запросе - это поместит элемент в нормальный поток и сбросит все смещения, вызванные transform.

https://jsfiddle.net/0ed68aqo/

0 голосов
/ 12 февраля 2020

Вы можете использовать flexbox для центрирования вашей формы вместо использования позиции и преобразования. Для него требуется меньше кода, и, по моему опыту, он всегда работал на всех устройствах, если только вам не нужна поддержка в браузерах старше 8 лет или браузере inte rnet.

Итак, для некоторого кода, взяв то, что вы написали, я отредактировал его следующим образом, и он работает для меня 

#navbar{
  background-color:blue;
  width:100%;
  height:50px;
  border:1px solid black;
}

.test_form {
    min-width: 400px;
    width: 28vw;
    max-width: 550px;
    /* Form outline */
    padding: 1em;
    border: 2px solid #192D4D;
    border-radius: 2em;
}

@media only screen and (max-height: 500px) {
.test_form {
    /* Center the form on the page vertically */
    margin: 0 auto;    
    min-width: 400px;
    width: 28vw;
    max-width: 550px;
    /* Form outline */
    padding: 1em;
    border: 2px solid #192D4D;
    border-radius: 2em;
    background-color:red;
    }
}


label {
    /* Uniform size & alignment */
    display: inline-block;
    width: 100px;
    text-align: center;
}

input, textarea {
    /* To make sure that all text fields have the same font settings
     By default, textareas have a monospace font */
    font: 1em sans-serif;

    /* Uniform text field size */
    width: 100%;
    box-sizing: border-box;

    /* Match form field borders */
    border: 1px solid #999;
    background-color:#F1F9FF;
}

textarea {
    /* Align multiline text fields with their labels */
    vertical-align: top;
}

table {
    width:100%;
    border-collapse: collapse;
    border: 2px solid #192D4D;
    letter-spacing: 1px;
    font-size: 0,8rem;
    text-align: center;
    background-color:#ADBEDA;
}

td, th {
    border: 1px solid #5C6F8C;
    padding: 5px 10px;
    text-align: left;
}

.submit-button {
    margin-left: calc(1em + 2vw);
    min-width:100px;
    width: 8vw;
    max-width:150px;
}

.flex{
    display: flex;
    align-items: center;
    justify-content: center;
        
}
<div id='navbar'>

</div>

<br>
<div class="flex">
  <form class="test_form">
    <table border="1">
      <thead>
        <tr><th colspan="2" scope="row">Table form</th></tr>
      </thead>
      <tr><th>asdasd</th><td>asdad</td></tr>
      <tr><th>asdasd</th><td><input value='asda'></td></tr>
      <tr><th>asdasd</th><td>asdad</td></tr>
      <tr><th>asdasd</th><td><textarea>asdads</textarea></td></tr>
    </table>
    <br>
    <input class ="submit-button" type="submit" value="Submit" />
  </form>

</div>

Короче говоря, я удалил из CSS правила позиции и преобразования в классе .test_form. Обернул вашу форму внутри класса .flex и добавил код flexbox в CSS.

display: flex заставляет div вести себя как контейнер flexbox, а его дочерние элементы - как элемент flexbox

align-items по вертикали выравнивает содержимое div

justify-content по горизонтали содержание div

0 голосов
/ 12 февраля 2020

из html & body, у вас есть несколько вариантов центрировать X / Y ваш контент без позиции:

возможность сгибания 

body {
margin:0;
display:flex;
flex-direction:column;
height:100vh;
}

div {margin:auto;width:/* if needed*/;}

nav{background:lightgreen}
div {background:lightblue;}
<nav> navbar any height</nav>
<div>any content here of any size </div>

возможность сетки 

body {
margin:0;
display:grid;
grid-template-rows: auto 1fr;
height:100vh;
}

div {margin:auto;width:/* if needed*/;}

nav{background:lightgreen}
div {background:lightblue;}
<nav> navbar any height</nav>
<div>any content here of any size </div>
0 голосов
/ 12 февраля 2020

Содержит <form> в <div>

<div class="container">
    <form class="test_form">
        .............................
    </form>
</div>

, и я предлагаю использовать только margin: [value] auto; для центрирования. удалите position: absolute и включите в список обязательных стилей центральную позицию

...