如何使用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; }

希望這對您有用。