如何使用HTML / CSS / JavaScript在一个项目上垂直对齐列表？

Question

我有一个HTML文档，列表很长，如下所示：

<ol>
    <li>frog</li>
    <li>fish</li>
    <li>flamingo</li>
    <li>ferret</li>
    <li><div class="marked">fox</div></li>
    ...
</ol>

该列表太长，无法在屏幕上显示所有项目。 我已经用div class="marked">和</div>标记了一项。 有什么办法可以使列表垂直位于该标记项目上。

• 如果列表太长，它应该在可见屏幕的边缘运行，并且不创建滚动条。

这是它在浏览器窗口中的显示方式示例：

 __________________
|   2.fish         |
|   3.flamingo     |
|   4.ferret       | <-- This marked item is centered.
|   5.elephant     |
|___6.mouse________| <-- No scrollbars.

如何在销售商品上垂直对齐列表？

Answer 1

这是基于James G.代码的解决方案，它通过使用getBoundingClientRect()避免了循环：

http://jsfiddle.net/d8d5jjvc/4/

var list = document.getElementById('list'),
    marked= document.getElementById('marked'),
    crm= marked.getBoundingClientRect(),
    height= crm.bottom-crm.top;

list.scrollTop= (crm.top-height)-(list.clientHeight-height)/2;

Answer 2

好的，我真的希望我能正确理解您，因为这花了我比预期更长的时间。

工作JSfiddle

首先，您必须找到要居中的元素，列表，列表中项目的高度以及要居中的元素的索引。 （我从这里偷走了一个函数来做最后一件事，以及将您的类更改为id。您可以弄清楚是否需要将其作为类）

function arrayObjectIndexOf(myArray, searchTerm) {
            for(var i = 0, len = myArray.length; i < len; i++) {
                if (myArray[i].firstChild === searchTerm) return i;
            }
            return -1;
        }

var list = document.getElementById('list'),
            listItems = list.children,
            listItemHeight = list.scrollHeight / listItems.length,
            target = elem,
            index = arrayObjectIndexOf(listItems, target);

然后棘手的部分是数学。 首先，将元素的高度提高到我们要居中的元素上方，然后减去容器的高度，再减去我们要居中的项目，然后减去2。如果有任何意义。 如果您不懂数学，则可能要绘制它，它将在纸上更有意义。

list.scrollTop = (index * listItemHeight) - ((list.clientHeight - listItemHeight) / 2);

Answer 3

您可以使用显示选项垂直显示列表。

display: inline;

我通常使用inline-block参数，这是

display: inline-block;

然后，您必须在CSS上执行此操作。

.marked: { display: inline-block; }

希望这对您有用。