1

我知道 CSS 中的垂直中心一开始很痛苦，但我只是让它变得更复杂了一点。在我的页面上，我有：

<ul id="complete">
</ul>

<form id="new_item_form">
  <input type="text" id="add_item" placeholder="Type some tasks here"/>
</form>

<ul id="incomplete">
</ul>

这是一个基本的任务列表。任务被添加到不完整的 ul 中，完成后移动到完整的 ul。我想通过 css 做的是让文本字段垂直居中在页面上并留在那里，两个列表靠在它上面。我一直在研究各种垂直对齐方式（在这里找到的表格摘要：http: //blog.themeforest.net/tutorials/vertical-centering-with-css/）但我似乎找不到方法我可以弄清楚如何适应以允许我需要的东西。我将如何完成这种固定位置居中的风格？

编辑：这是我正在寻找的图像：https ://www.dropbox.com/s/i0oit3v84j93b5g/Screen%20Shot%202012-10-11%20at%204.27.16%20PM.png

4

3 回答 3

2

这是你想要得到的吗？

当然，我的代码有点粗略（在 tds 上使用 height 属性！不要骂我太多）。但你明白了。

如果表格的高度不知道也不固定，但它的父高度是已知的，它就不起作用（参见这个例子），你必须把它分解。

如果您根本不知道任何高度，那么很难对齐...

进一步阅读垂直对齐

于 2012-10-11T20:50:36.083 回答
1

我想不出用 CSS 做这件事的任何方法，但用 JavaScript/jQuery 做这件事相当容易。这是一个有效的 jsFiddle，它可以在文档加载时执行您想要的操作。当然，如果您更改了列表，您会再次调用代码。

首先，您将列表和表单包含在一个 div 中。我称之为 id="ciddle"。然后您使用 CSS 将 ciddle div 设置为 position: relative。然后使用 JavaScript 代码获取封闭窗口或框架高度，计算窗体的中心，然后减去上部列表高度以获得正确的 div 位置：

$(document).ready(function(e) {
    // To work with frames, too
    function getParentDocHeight($ele) {
        for (;;) {
            if (!$ele || !$ele.length) {
                return $(window).height();
            }
            $ele = $ele.parent();
            if ($ele.is("frame") || $ele.is("window")) {
                return $ele.height();
            }
        }
    }
    var $cm = $("#cmiddle");
    var formHeight = $("#new_item_form").outerHeight();
    var viewHeight = getParentDocHeight($cm)
    var formTop = (viewHeight - formHeight) / 2;
    var divTop = formTop - $("#complete").outerHeight();
    $cm.css("top", divTop);
});

编辑：Kraz 很好地添加了将列表项添加到两个列表并再次调用代码进行重新计算的模拟。他的jsFiddle 在这里。

于 2012-10-11T20:59:37.040 回答
0

嗯，我不确定你在说什么

但一般来说，把 line-height = div 的高度。如有必要，我将围绕它创建一个 div

如果有一些非常特殊的情况，我会做一些数学来手动将其居中

因此，如果您想将 1 件事居中，请使用 line-height = div 的高度创建一个 div，然后使 div 位置：absolute, width, height, ....

希望这可以帮助

于 2012-10-11T20:23:39.567 回答