如何使用HTML/CSS/JavaScript在一個項目上垂直對齊列表？

我有一個HTML文檔有一個很長的名單，像這樣：如何使用HTML/CSS/JavaScript在一個項目上垂直對齊列表？

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

我怎麼能垂直地對已上市項目的列表？

來源

2014-09-06 Village

這個問題是很多數學。我正在研究一個答案，但它已經走得比我想象的要長。 – 2014-09-06 03:12:29

你能解釋一下你的問題嗎？ – 2014-09-06 03:25:06

下面是根據詹姆斯·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;

來源

2014-09-06 06:34:02

很酷。多麼有用的功能，TIL。 – 2014-09-06 06:37:10

-1

您使用顯示選項垂直顯示列表。

display: inline;

我通常使用inline-block的參數，這是

display: inline-block;

然後，在你這樣做對你的CSS。

.marked: { display: inline-block; }

我希望這對你有用。

來源

2014-09-06 02:22:49 Jase

我不認爲你完全閱讀這個問題。 – 2014-09-06 02:39:01

好的，我真的很希望我能正確理解你，因爲這樣做比我想象的要長。

Working JSfiddle

首先，你必須找到你所圍繞的元素，列表，在列表中的項目的高度，而你爲中心的元素的索引。（我偷的功能從here做到最後一點，以及改變你的類的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);

來源

2014-09-06 03:27:30

不錯的工作。您可以使用'getBoundingClientRect'來避免循環。看我的帖子。 – 2014-09-06 06:35:53

如何使用HTML/CSS/JavaScript在一個項目上垂直對齊列表？

回答

相關問題