垂直和水平居中居中表格

问题描述 投票：0回答：4

我想将表单放在页面的中心，而我已经做到了。但是，我有一个问题：当我调整浏览器窗口的大小并且高度降低时，我希望表单停留在导航栏下方，并且页面会溢出并允许我滚动，以便查看表单的其余部分。而是将其自身定位在导航栏上方。

我试图将表单包含在另一个容器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>

@media下面的CSS是我以前使用的代码，它仅将表单水平居中，但它在垂直位置上具有所需的行为（保持在导航栏下方并溢出）。

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

css position media-queries centering
4个回答
1
投票

将position: static;和transform: none;添加到媒体查询的.test_form规则中-这将使元素进入正常流程并重置由transform引起的所有偏移量。

https://jsfiddle.net/0ed68aqo/

0
投票

来自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
投票

您可以使用flexbox来使表单居中，而不是使用位置和变换。它需要更少的代码，并且根据我的经验，它始终可以在所有设备上运行，除非您需要8年以上的旧浏览器或Internet Explorer支持。

所以，对于某些代码，以您编写的代码为例，我对其进行了编辑，并且对我有用

#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的内容

-2
投票

在<form>中包含<div>

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

而且我建议仅使用margin: [value] auto;居中。删除position: absolute以及实现中心位置所包含的补充样式

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.