在垂直排列的多行元素div與滾動上溢

我想垂直對齊一組元素（其中每個可能是多行）到一個div的中間，也有溢出滾動。我可以通過display：table和display：table-cell垂直對齊多行內容，但這似乎禁用了任何溢出處理。另外，我嘗試過使用行高技巧（將行高設置爲包含div的高度），但垂直對齊似乎不適用於多行內容。在垂直排列的多行元素div與滾動上溢

是否存在純粹的CSS解決方案？

這裏有一個小提琴，說明我想要實現：

http://jsfiddle.net/arxoq7oq/1/（更新）

這裏是我的html：

<body> 
    <p>Goal: Vertically align to middle with scroll upon overflow - Scenarios A and B need to be handled with the same code (unlike currently):</p> 
    <div class="frame"> 
     Scenario A 
     <div class="container green"> 
     <div class="item-list1"> 
      <div class="item">Item 1</div> 
      <div class="item">Item 2 might wrap to multiple lines</div> 
     </div> 
     </div> 
    </div> 
    <div class="frame"> 
     Scenario B 
     <div class="container green"> 
     <div class="item-list2"> 
      <div class="item">Item 1</div> 
      <div class="item">Item 2 might wrap to multiple lines</div> 
      <div class="item">Item 3</div> 
      <div class="item">Item 4</div> 
      <div class="item">Item 5</div> 
      <div class="item">Item 6</div> 
      <div class="item">Item 7</div> 
     </div> 
     </div> 
    </div> 

    <p>Can achieve vertical alignment to middle, but overflow scroll doesn't work:</p> 
    <div class="frame"> 
     Scenario A 
     <div class="container green"> 
     <div class="item-list1"> 
      <div class="item">Item 1</div> 
      <div class="item">Item 2 might wrap to multiple lines</div> 
     </div> 
     </div> 
    </div> 
    <div class="frame"> 
     Scenario B 
     <div class="container red"> 
     <div class="item-list1"> 
      <div class="item">Item 1</div> 
      <div class="item">Item 2 might wrap to multiple lines</div> 
      <div class="item">Item 3</div> 
      <div class="item">Item 4</div> 
      <div class="item">Item 5</div> 
      <div class="item">Item 6</div> 
      <div class="item">Item 7</div> 
     </div> 
     </div> 
    </div> 

    <p>Can achieve overflow scroll, but vertical alignment to middle doesn't work:</p> 
    <div class="frame"> 
     Scenario A 
     <div class="container red"> 
     <div class="item-list2"> 
      <div class="item">Item 1</div> 
      <div class="item">Item 2 might wrap to multiple lines</div> 
     </div> 
     </div> 
    </div> 
    <div class="frame"> 
     Scenario B 
     <div class="container green"> 
     <div class="item-list2"> 
      <div class="item">Item 1</div> 
      <div class="item">Item 2 might wrap to multiple lines</div> 
      <div class="item">Item 3</div> 
      <div class="item">Item 4</div> 
      <div class="item">Item 5</div> 
      <div class="item">Item 6</div> 
      <div class="item">Item 7</div> 
     </div> 
     </div> 
    </div> 
    </body>

這裏是我的CSS：

body { 
    margin:0; 
    padding:0; 
    font-family:Arial; 
    font-size:100%; 
} 

.green {background:chartreuse;} 

.red {background:crimson;} 

.frame {display:inline-block;} 

.container { 
    display:table; 
    width:10em; 
    height:10em; 
} 

.item-list1 { 
    display:table-cell; 
    width:100%; 
    height:100%; 
    vertical-align:middle; 
    overflow-y:auto; /* Does nothing with table-cell*/ 
} 

.item-list2 { 
    width:100%; 
    height:100%; 
    overflow-y:auto; 
    vertical-align:middle; /* Does nothing without table-cell */  
} 

.item { 
    margin:1em; 
}

來源

2014-10-26 Eli Chan

我誠實地不完全理解這種技術爲什麼以及如何工作，但它的確如此!!!!!!它基於this article末尾描述的對齊技術。

結果檢查了這個JSFiddle。請注意場景A和B的第一個示例如何應用相同的類！

這裏是做了工作的CSS：

.container { 
    display:block; 
    width:10em; 
    height:10em; 
    overflow: auto; 
} 
.container:before{ 
    content: ''; 
    display: inline-block; 
    height: 100%; 
    vertical-align: middle; 
} 
.item-list1 { 
    display:inline-block; 
    width: 8em; 
    vertical-align:middle; 
}

來源

2014-10-29 16:32:46 RMo

謝謝，這個伎倆！ – 2014-10-30 05:49:48

垂直對齊塊的另一個技巧是：

.block-parent { 
    position: relative; 
} 

.block-child { 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
}

來源

2014-10-26 18:31:16

感謝提這一招。但是，必須指定子塊的高度，以使溢出處理正常工作，並且內容大小可變。所以，這並不能解決只有CSS的問題，但它可能是用javascript解決問題的最佳方法。 – 2014-10-26 19:19:29

檢查這篇文章http://css-tricks.com/centering-css-complete-guide/ – 2014-10-26 19:28:31

在垂直排列的多行元素div與滾動上溢

回答

相關問題