调整窗口大小时，HTML会更改位置

Question

defprotocol

它只是在屏幕中间显示一个方形菜单，直到我调整窗口大小。它不再停留在中心，我该如何改变呢？我尝试过使用$('input[type=file]').change(function () { console.dir(this.files[0]); console.dir(this.files[0].name); });，但无济于事。如何让它保持固定到位？

Answer 1

您已对菜单的位置进行了硬编码。而是将正文设置为position: relative，将导航设置为position: absolute。然后，您可以使用css calc()功能将导航中心放在任何尺寸的页面上。见例：

html {
  min-height: 100%;
    }
body {
  height: 100vh;
  width: 100%;
  position:relative;
    }

.menu {
position: absolute;
font-family: sans-serif;
background: blue;
padding: 5px;
width: 130px;
z-index: 100;
top:calc((100vh - 2.7em - 10px)/2);
right:calc((100% - 140px)/2);
box-shadow: 5px 5px 5px;
border-radius:5px 5px 5px 5px;



}

.menu a, 
.menu h3 {
font-size: 0.9em;
display: block;
margin: 0 0.5em;
color: white;
}

input {
    width: 120px;
}

<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">




<!-- HTML -->
<main>

<nav class="menu">
<div id='wrapper'>
<h3>Login</h3>

<form method='POST' class= "post-form"> {{ form.as_p }} </form>

<a href="#" class="hvr-grow">Create Account</a>
</div>

</nav>

</main>

Answer 2

试试这个

＆＃13;

＆＃13;

.menu {
font-family: sans-serif;
background: blue;
padding: 5px;
width: 130px;
z-index: 100;
box-shadow: 5px 5px 5px;
border-radius:5px 5px 5px 5px;
margin-bottom: 160px;
position: relative;
top:250px;
margin: auto;
}

.menu a, 
.menu h3 {
font-size: 0.9em;
display: block;
margin: 0 0.5em;
color: white;
}

input {
    width: 120px;
}

＆＃13;

<main>
  <nav class="menu">
    <div id='wrapper'>
      <h3>Login</h3>
      <form method='POST' class= "post-form"> {{ form.as_p }} </form>
      <a href="#" class="hvr-grow">Create Account</a>
    </div>
  </nav>
</main>

＆＃13;

＆＃13;

＆＃13;

JsFiddle - https://jsfiddle.net/f39wurmn/