在垂直排列的多行元素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与滚动上溢

回答

相关问题