1
マテリアライズを使用してフォームを画面の中央に配置しようとしています。私はすべてを試みましたが、私はすべての決意のためにそれを行うことはできませんし、また敏感です。特定の解像度では完璧に動作しますが、コントロールを追加または削除すると、一部の解像度で見栄えが良くなり、他の場合には正しく表示されません。手助け？ありがとうございました！マテリアライズの垂直方向の整列
コード
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Test</title>
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/css/materialize.min.css">
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.card {
margin: 1rem 0 1rem 0 !important;
}
.card .card-title {
background-color: #26a69a;
}
.card-title span {
display: block;
text-align: center;
padding: 5px;
}
.card-content {
padding: 30px;
}
.valign {
width: 100%;
}
.valign-wrapper {
width: 100%;
background: url("http://vunature.com/wp-content/uploads/2016/10/trees-woods-tree-nature-path-forest-landscape-amazing-pictures-of-wallpapers.jpg") no-repeat;
}
.circle {
display: block;
margin: 10px auto;
}
</style>
</head>
<body>
<header class="navbar-fixed">
<nav class="top-nav">
<div class="nav-wrapper grey darken-3">
<a class="brand-logo center" href="#">Logo</a>
<ul class="right">
<li>
<a href="#" id="registerLink">Register</a>
</li>
<li>
<a href="#" id="loginLink">Log in</a>
</li>
</ul>
</div>
</nav>
</header>
<div class="valign-wrapper">
<div class="valign">
<div class="container">
<div class="card">
<div class="card-title white-text">
<span>Register</span>
</div>
<div class="card-content">
<p>
Text text text text text text text text text text text text text text text text text text text text text text text
</p>
<form action="#" enctype="multipart/form-data" id="externalRegisterForm" method="post" novalidate="novalidate">
<div class="validation-summary-valid text-danger" data-valmsg-summary="true">
<ul>
<li style="display:none" />
</ul>
</div>
<div>
<section style="position: absolute; left: 50%; transform: translateX(-50%); display: none;">
<input type="submit" class="btn" value="Sign In">
<input type="submit" class="btn" value="x">
</section>
<img class="circle" src="https://images.google.com/images/branding/googleg/1x/googleg_standard_color_128dp.png" width="128" height="128" alt="">
</div>
<div class="row">
<div class="input-field col s12 m4 l4 xl4">
<input class="validate" data-val="true" data-val-required="El campo Nombre de usuario es obligatorio." id="UserName" name="UserName" type="text" />
<label for="UserName" class="active">Username</label>
</div>
<div class="input-field col s12 m4 l4 xl4">
<input class="validate" data-val="true" data-val-required="El campo Nombre(s) es obligatorio." id="Name" name="Name" type="text" />
<label for="Name" class="active">Name</label>
</div>
<div class="input-field col s12 m4 l4 xl4">
<input class="validate" data-val="true" data-val-required="El campo Apellido(s) es obligatorio." id="LastName" name="LastName" type="text" />
<label for="LastName" class="active">Last name</label>
</div>
<div class="input-field col s12">
<input class="validate" data-val="true" data-val-required="El campo Email es obligatorio." id="Email" name="Email" type="text" />
<label for="Email" class="active">Email</label>
</div>
</div>
</form>
</div>
<div class="card-action">
<input type="submit" class="btn" value="Sign In" form="externalRegisterForm" />
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.1/js/materialize.min.js"></script>
<script type="text/javascript">
$(function() {
$('.button-collapse').sideNav();
});
</script>
</body>
</html>EDIT
https://image.ibb.co/h7ESBk/1.jpg
下の白線を参照してください。 1366x768の解像度です。入力を追加すると、「正常」で反応します。しかし、入力を削除すると、白い背景がどのように大きくなっているかを見ることができます。
あなたは私たちに、それはあなたがそれをする方法を見ていない解像度を与えることができますか？ – TW80000
@ TW80000お返事ありがとうございます。私はその記事を編集した。 – Kardia
問題は、ページの内容が画面全体を使い切るのに十分な高さでないときに、ページの下部に白い背景が表示されないようにすることです。 – TW80000