Css ZURB基金会如何垂直中心元素？我正在构建一个登录表单，我希望屏幕中间的用户名和密码字段为正方形。我还使用ZURB基金会软件包来构建这个表单。我很难把东西垂直地放在中心_Css_Formatting_Centering_Zurb Foundation

Css ZURB基金会如何垂直中心元素？我正在构建一个登录表单，我希望屏幕中间的用户名和密码字段为正方形。我还使用ZURB基金会软件包来构建这个表单。我很难把东西垂直地放在中心

css formatting zurb-foundation

Css ZURB基金会如何垂直中心元素？我正在构建一个登录表单，我希望屏幕中间的用户名和密码字段为正方形。我还使用ZURB基金会软件包来构建这个表单。我很难把东西垂直地放在中心,css,formatting,centering,zurb-foundation,Css,Formatting,Centering,Zurb Foundation,这是我的密码： <!DOCTYPE html>   <!--[if IE 7]> <htm

这是我的密码：

<!DOCTYPE html>

<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

    <head>
      <meta charset="utf-8" />

      <!-- Set the viewport width to device width for mobile -->
      <meta name="viewport" content="width=device-width" />
      <title>
            Registration
        </title>

         <!-- Included CSS Files (Compressed) -->
          <link rel="stylesheet" href="stylesheets/foundation.min.css">
          <link rel="stylesheet" href="stylesheets/app.css">
          <link rel="stylesheet" href="stylesheets/main.css">

          <script src="javascripts/modernizr.foundation.js"></script>

          <!-- IE Fix for HTML5 Tags -->
          <!--[if lt IE 9]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
          <![endif]-->
    </head>
        <nav class="top-bar">
         <ul>
            <li class="name"><h1><a href="#">Title</a></h1></li>
            <li class="toggle-topbar"><a href="#"></a></li>
        </ul>
        <section>
            <ul class="left">
                <li><a href="#">Link</a></li>
            </ul>
            <ul class="right">
                <li><a href="#">Link</a></li>
            </ul>
        </section>
        </nav>
    <body>
        <div class="row" id="parent">
            <div class="six columns" id="child">
                <form id = "register">
                    <input type="text">

                </form>
            </div>
        </div>



        <script src="javascripts/jquery.foundation.topbar.js"></script>
        <!-- Included JS Files (Compressed) -->
        <script src="javascripts/jquery.js"></script>
        <script src="javascripts/foundation.min.js"></script>
        <!-- Initialize JS Plugins -->
        <script src="javascripts/app.js"></script>
    </body>
</html>

奇怪的是，如果我将某个东西的高度更改为动态的（即，

高度：30%；

），那么它不起作用，为什么？

问题是HTML/CSS不能很好地处理垂直居中。祖鲁的基金会在这方面不会帮助或伤害你。

看到这个非常相似的问题了吗？

基础不能很好地处理垂直对齐：

您可以使用垂直填充来近似它，但对于动态内容，没有一种简洁的方法

下面的JSFIDLE（不是我创建的）展示了它应该如何使用

div {
display: table-cell;
vertical-align: middle;
height: 50px;
border: 1px solid red;
}

但不与基础CSS的其余部分结合。< /P> < P> <强>更新< /强>

这个特性作为一个组件（XY中心）包含在即将到来的基金会版本中。更多详细信息

如果您使用的是旧版本的基础，则使用垂直和水平的中心，以最小数量的CSS/HTML标记来定位登录表单。

HTML

<div class="row" >
    <div class="small-12 medium-6 columns" id="login">
        <form >
            <div class="row collapse">
                <div class="small-12 medium-5 columns">
                    <input type="text" name="username" placeholder="Username" />
                </div>
                <div class="small-12 medium-5 columns">
                    <input type="password" name="password" placeholder="Password" />
                </div>
                <div class="small-12 medium-2 small-centered medium-uncentered columns">
                  <a href="#" class="button postfix">Go</a>
                </div>
            </div>
        </form>
    </div>
</div>

结果

无论屏幕大小如何，登录表单都将保持垂直和水平居中。下面是结果的屏幕截图

和工作

Zurb基金会专门处理垂直居中的混乱；在下面的JFIDLE（）中工作的例子在基础上是不起作用的。因为你没有为它“在基础上不起作用”做一个例子，所以我为你创建了一个例子，只是它工作得很好。（）基金会不向垂直提供中心类，相反，如果希望的话，它留给开发人员自己编写垂直对齐CSS。因此，我将再次声明，这不是一个基础问题，而是“如何用HTML / CSS垂直地处理一些问题”，因为一个人不“使用基础”来垂直对齐事物。让我换一种方式说：我不能让它在基础上工作，而其他人也不能。垂直居中的例子在基础的基础上工作得很好，所以在基础CSS中一定会有一些东西弄乱它。增加了一个例子，说明它是如何工作的，在基础之外。你链接到的Git集线器问题是从两个主要的修订回来的（基金会2）基金会从那时起从头开始改写过两次。你还在用2.0吗？这对我不管用。对我来说，表单位于窗口的左上角。JsFoDeld: JsFoDeld例证了基础上的中心定居点被打破了，而不是解决方案。我发现的唯一方法（我还没有尝试新的基础发布）是用垂直填充来近似它。当它不能提供问题的答案时，我很难理解为什么答案是正确的。因为当时没有真正的解决方案，但是填充解决方案确实提供了解决办法。但是，我确实对你的答案投了赞成票。如果

表格单元格

包含在带有

display:table

的容器中，这将起作用。查看修正小提琴：这是ZURB基金会内部的截图吗？它是我创建的JSfDelphi的屏幕截图，使用ZURB基金会和我创建的CSS类来垂直地排列一个元素。单击上面的链接查看正在运行的演示。谢谢-但它不包括主Zurb CSS文件，这是导致问题的原因。我怀疑（虽然你必须测试它）如果文件被包含，这个解决方案将不再工作。基础CSS被包括在内。看看左边的外部资源，你会看到基础。M.CSS被包含在列表中。抱歉，错过了。是的，你的解决方案有效。不幸的是，我不是OP，否则我会选择它作为答案！

<div class="row" >
    <div class="small-12 medium-6 columns" id="login">
        <form >
            <div class="row collapse">
                <div class="small-12 medium-5 columns">
                    <input type="text" name="username" placeholder="Username" />
                </div>
                <div class="small-12 medium-5 columns">
                    <input type="password" name="password" placeholder="Password" />
                </div>
                <div class="small-12 medium-2 small-centered medium-uncentered columns">
                  <a href="#" class="button postfix">Go</a>
                </div>
            </div>
        </form>
    </div>
</div>

#login {
    position: absolute;
    left: 50%;
    top: 50%;

    /*
    *  Where the magic happens
    *  Centering method from CSS Tricks
    *  http://css-tricks.com/centering-percentage-widthheight-elements/
    */
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}