logo标签列表

如何在Zurb Foundation中垂直居中元素？

cssformattingcenteringzurb-foundation
23

我正在构建一个登录表单，希望用户名和密码字段位于屏幕中央。同时我使用了Zurb Foundation包来构建这个表单。我在垂直方向上居中物品遇到了很多麻烦。

以下是我的代码：

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

还有一些我试过但无法正常运行的CSS代码:

body {
    /*background-image: url('../images/gplaypattern.png');*/
    background: red;
}

#register {
    background-color:  black;
    width:80%;
}

#parent {
    position: absolute; 
    left: 50%; 
    top: 50%; 
    height: 80px;
}

#child {
    height: 75px;
    position:absolute;
    top: 50%;
    background: green;
}

奇怪的是，如果我将某个元素的高度改为动态的（即height: 30%;），它就无法正常工作，为什么呢？

3个回答
30

更新

此功能将作为组件（xy-center）包含在即将推出的Foundation版本中。更多详情请参见Github。

如果您正在使用旧版本的Foundation，使用CSS Tricks居中方法可以在最少的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>

CSS

#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%);
}

结果

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

enter image description here

此外，这里有一个可工作的jsFiddle。

这个截图是在Zurb Foundation中拍摄的吗？ - Sinister Beard
1
这是我用Zurb Foundation创建的一个jsFiddle截图，并使用了我自己创建的一个CSS类来垂直居中一个元素。点击上面的链接查看演示效果。 - Brett DeWoody
谢谢 - 但它不包括主要的Zurb CSS文件，这就是导致问题的原因。我怀疑（尽管你必须测试一下），如果那个文件被包含进来，这个解决方案将不再起作用。 - Sinister Beard
1
基础CSS已包含在内。在左侧的“外部资源”中查看，您将会看到foundation.min.css已被列入其中。 - Brett DeWoody
抱歉，我错过了。是的，你的解决方案可行。不幸的是，我不是原帖发布者，否则我会选择它作为答案！ - Sinister Beard
6

Foundation在处理垂直对齐方面表现不佳：https://github.com/zurb/foundation/issues/411。

您可以使用垂直填充来近似实现，但对于动态内容，没有简洁的解决方法。

以下jsFiddle演示（非本人创建）了如何使用：

div {
display: table-cell;
vertical-align: middle;
height: 50px;
border: 1px solid red;
}
这个链接与Foundation CSS的其余部分不兼容。
这对我不起作用。表单对于我来说定位在窗口的左上角。这个jsFiddle应该把表单居中吗？ - Brett DeWoody
@BrettDeWoody 这个JSFiddle演示了Foundation中的垂直居中是有问题的，而不是一个解决方案。我发现唯一的方法（我还没有尝试过Foundation的新版本）是使用垂直填充来近似实现它。 - Sinister Beard
我很困惑为什么选择这个答案作为正确答案，因为它并没有提供解决问题的方法。 - Brett DeWoody
因为当时没有真正的解决方案，但填充解决方案确实提供了一种变通方法。不过，我确实点赞了你的回答。 - Sinister Beard
1
只有在包含 display: table 的容器内部包含 table-cell 时，这才能正常工作。请参见更正后的 fiddle：http://jsfiddle.net/icoloma/NGVjk/1/。 - Nacho Coloma
0
1
Zurb Foundation 特别是会影响垂直居中的问题；在以下 jfiddle（http://jsfiddle.net/53ALd/6/）中有效的示例在 Foundation 中无法正常工作。 - Sinister Beard
由于您没有为“Foundation中不起作用”的示例创建示例，因此我为您创建了一个示例，但它可以正常工作。（http://jsfiddle.net/SpyAk/3/）Foundation不提供垂直居中的类，而是让开发人员编写自己的垂直对齐CSS。因此，我要再次声明，这不是Foundation的问题，而是“如何使用HTML / CSS垂直居中某些内容”的问题，因为不能“使用Foundation”来垂直对齐东西。 - Ed Charbeneau
换句话说，我无法在Foundation中使其工作，其他许多人也是如此：https://github.com/zurb/foundation/issues/411。竖直居中的示例在Foundation外部可以正常工作，因此必须有一些基础CSS的东西弄乱了它。 - Sinister Beard
添加了一个示例，展示了它在 Foundation 之外应该如何工作。 - Sinister Beard
你链接的 GitHub 问题是两个主要版本之前的（Foundation 2.0）。自那时以来，Foundation 已经被彻底重写了两次，你还在使用 2.0 吗？ - Ed Charbeneau
不，版本4.0还是存在这个问题 - 至少对我来说是这样。如果你在V4中解决了这个问题，我会非常高兴！ - Sinister Beard
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接