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

How to vertically align a list on one item, with HTML/CSS/JavaScript?

本文关键字：项目 一个 垂直 列表 对齐 HTML 何使用 CSS JavaScript      更新时间：2023-09-26

我有一个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.

如何垂直排列已上市商品的列表？

这里有一个基于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;

好的，我真的希望我能正确理解你，因为这比我预期的要长得多。

工作JSfiddle

首先，你必须找到你所关注的元素，列表，列表中项目的高度，以及你所关注元素的索引

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

使用display选项垂直显示列表。

display: inline;

我通常使用内联块参数，这是

display: inline-block;

然后，你必须在你的css上这样做。

.marked: { display: inline-block; }

我希望这对你有用。

相关文章：