CSS：div with display：table;(CSS: div with display:table; within a list element no auto height?)

我有一个无序列表ul li其中每个li都浮动但由于设置overflow:hidden;而具有高度值overflow:hidden; 到列表项。

因此，当将元素悬停在webinspector中时，list-item的高度值明显为288px。

在每个li我还有一个具有以下属性的div.caption ：

.caption {
  opacity: 0;
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  width: 101%;
  text-align: center;
  background-color: rgba(0,0,0,.6);
  display: table;
} 
  
<li>
  <a href="#"><img src="#"></a>
  <div class="caption">some more elements in here</div>
</li> 
  
 
 
 由于li内的图像的高度，如上所述的列表项的高度是自动的。 （webinspector清楚地显示列表项具有高度） 
 
 但是我的li中的.caption div不会自动高于父级。 我希望div.caption与列表项一样高100％。 
 
 我能在这做什么？ 
 
 示例： http ： //jsfiddle.net/rgwcL8qt/1/叠加层应始终覆盖整个图像。 
I have an unordered list ul li where each li is floated but has a height value due to setting overflow:hidden; to the list-item.
 
So when hovering the element in the webinspector the list-item clearly has a height value of 288px.
 
Within each li i also have a div.caption with the following attributes:
 
 
 
  
  
.caption {
  opacity: 0;
  position: absolute;
  height: 100%;
  left: 0;
  top: 0;
  width: 101%;
  text-align: center;
  background-color: rgba(0,0,0,.6);
  display: table;
} 
  
<li>
  <a href="#"><img src="#"></a>
  <div class="caption">some more elements in here</div>
</li> 
  
 
 
The height of the list-item as mentioned above is automatic due to the height of the image within the li. (the webinspector clearly shows that the list-item has a height)
 
However my .caption div within the li is not automatically as high as the parent. I want the div.caption to be 100% as high as the list item. 
 
What can I do here?
 
Example: http://jsfiddle.net/rgwcL8qt/1/ The overlay should always cover the entire image.
                
最满意答案
                
                    
                        
 div.caption { display: table }与div.caption-in { display: table-cell } div.caption { display: table }在一起创建一个新的块格式化上下文。 
 
 更改为div.caption { display: block; } 应该解决你的问题。 
 
 编辑：如果你需要将内容集中在标题div中，那么你应该采取不同的方法： 
 
.caption:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.3em;
}
.caption {
    opacity: 0;
    z-index: 1;
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    width: 101%;
    text-align: center;
    background-color: rgba(0,0,0,.6);
    display: block;
    cursor: pointer;       
}
.caption-in {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}
 
 http://jsfiddle.net/vmg8jfed/ 
div.caption { display: table } with div.caption-in { display: table-cell } within creates a new block formatting context.
 
Changing to div.caption { display: block; } should solve your problem.
 
EDIT: Should you need to center the content inside the caption div then you ought to take a different approach:
 
.caption:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  margin-right: -0.3em;
}
.caption {
    opacity: 0;
    z-index: 1;
    position: absolute;
    height: 100%;
    left: 0;
    top: 0;
    width: 101%;
    text-align: center;
    background-color: rgba(0,0,0,.6);
    display: block;
    cursor: pointer;       
}
.caption-in {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}
 
http://jsfiddle.net/vmg8jfed/