在Materialise CSS中垂直对齐

时间：2017-08-22 22:35:33

标签： css css3 materialize

我正在尝试使用Materialize将表单置于屏幕中心。我尝试了所有的东西，但我无法为所有分辨率做到这一点，也能做出回应。在某些分辨率下它工作得很完美，但是当你添加或删除控件（）时，在某些分辨率下它看起来不错，在其他分辨率中它会出错。一些帮助？谢谢！

代码 

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

修改

https://image.ibb.co/h7ESBk/1.jpg

见下面的白线。它的分辨率为1366x768。如果您添加更多输入，它看起来“正常”和响应。但是如果删除输入，您可以看到白色背景的大小。

2 个答案:

答案 0 :(得分：0)

这些UI库已经为此提供了一个“网格”解决方案。但是，我发现vanilla CSS flexbox（无论是硬编码还是在浏览器中使用JS编写脚本）都非常容易以两种方式集中。

至于断点，你需要它们。我在这个项目https://github.com/rhroyston/firebase-v4-auth上完成了这一切。随意复制＆amp;根据需要粘贴。下面的代码段。

//ON LOAD INITIALLY ASSUME PHONE
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
doc.getElementById("title").style.display = "flex";
doc.getElementById("title-right").style.display = "none";
if (width >= 840) {
    //IT'S A DESKTOP
    doc.getElementById("title").style.display = "none";
    doc.getElementById("title-right").style.display = "flex";
}
else if (width >= 480) {
    //IT'S A TABLET
    doc.getElementById("title").style.display = "flex";
    doc.getElementById("title-right").style.display = "none";
}
//ON RESIZE INITIALLY ASSUME PHONE
window.addEventListener("resize", resizeThrottler, false);
var resizeTimeout;
function actualResizeHandler() {
    // assuming device is a phone
    doc.getElementById("title").style.display = "flex";
    doc.getElementById("title-right").style.display = "none";
    if (window.innerWidth >= 840) {
        //device is a desktop
        doc.getElementById("title").style.display = "none";
        doc.getElementById("title-right").style.display = "flex";
    }
    else if (window.innerWidth >= 480) {
        //device is a tablet
        doc.getElementById("title").style.display = "none";
        doc.getElementById("title-right").style.display = "flex";
    }
}
function resizeThrottler() {
    // ignore resize events as long as an actualResizeHandler execution is in the queue
    if (!resizeTimeout) {
        resizeTimeout = setTimeout(function() {
            resizeTimeout = null;
            actualResizeHandler();
            // The actualResizeHandler will execute at a rate of 15fps
        }, 66);
    }
}

答案 1 :(得分：0)

根据您在评论中提供的反馈，我认为您只需要将min-height: calc(100vh - 64px);添加到.valign-wrapper。

这将填满整个页面。您可能还必须修改background属性以确保图像填满整个元素，我无法加载图像，因此我无法对其进行测试。垂直对齐已经有效。

之前：enter image description here

之后：enter image description here

相关问题
最新问题