1

JS Fiddle上的代码示例

div 横幅和 ul 具有固定的高度。
li 标签内的元素需要垂直居中对齐。
我需要将“info-wrapper”div 准确地放置在“disp-img-contanier”div 之上。但由于我使用的是 position=absolute 和 top=0 ，所以“info-wrapper” div 向上移动。

有什么方法可以达到预期的结果？

HTML：

<div class="banner">
<ul class="banner-display clearfix">
    <li class="first-default">
        <div class="disp-img-contanier">
            <!--image goes here-->
            <img src="http://i303.photobucket.com/albums/nn134/gotitlikethat97/Photography/9973TressDunceCap.jpg" width="292px" height="320px" />
        </div>
        <div class="info-wrapper">
            <div class="info-base">
                 <h2>Hover Text</h2>

            </div>
        </div>
    </li>
    <li class="first-default">
        <div class="disp-img-contanier">
            <!--image goes here-->
            <img src="http://i303.photobucket.com/albums/nn134/gotitlikethat97/Photography/9973TressDunceCap.jpg" width="292px" height="320px" />
        </div>
        <div class="info-wrapper">
            <div class="info-base">
                 <h2>Hover Text</h2>

            </div>
        </div>
    </li>
    <li class="first-default">
        <div class="disp-img-contanier">
            <!--image goes here-->
            <img src="http://i303.photobucket.com/albums/nn134/gotitlikethat97/Photography/9973TressDunceCap.jpg" width="292px" height="320px" />
        </div>
        <div class="info-wrapper">
            <div class="info-base">
                 <h2>Hover Text</h2>

            </div>
        </div>
    </li>
</ul>

CSS：

    .banner {
    position: relative;
    z-index: 3;
    height: 550px;
    display: table;
    border-collapse: separate;
    border-spacing: 10px;
}

    .banner .banner-container {
    z-index: 3;
    height: 550px;
    display: table;
    border-collapse: separate;
    border-spacing: 10px;
    width:100%;
}

    .banner-display {
    width: 920px;
    margin: 0 auto;
    z-index: 0;
    height: 550px;
    position: relative;
    padding: 0;
    display: table-row;
}

    .banner-display li {
    width: 292px;
    display: table-cell;
    vertical-align: middle;
    padding-top: 5%!important;
    height: auto;
    position: relative;
    overflow: hidden;
}

    .disp-img-contanier {
    height: 320px;
    width: 292px;
    vertical-align: middle;
    overflow: hidden;
}

    .info-wrapper {
    display: block;
    width: 292px;
    height: 320px;
    position: absolute;
    top: 0;
    background: rgba(225, 225, 225, 0.8);
}
4

2 回答 2

1

这似乎可以解决问题：http: //jsfiddle.net/mikelyons/9yfEf/1/ 

.info-wrapper {
    display: block;
    width: 292px;
    height: 320px;
    position: relative;
    top: -340px;
    background: rgba(225, 225, 225, 0.8);
}

.info-wrapper相对于它在文档流中的位置向上移动340px它会将它直接放在它上面的元素上。

于 2013-11-07T01:33:19.467 回答
1

为此，您需要稍微更改一些 CSS。

.info-wrapper {
  width: 292px;
  height: 320px;
  position: absolute;
  top: 50%;
}

.info-base {
  position: absolute;
  bottom: 50%;
  width: 296px;
  background: rgba(225, 225, 225, 0.8);
  height: 320px;
}

最后，您需要摆脱列表元素中的填充顶部，所以：

.banner-display li {
  padding-top:0;
}

这将使 div 垂直居中。如果您需要填充顶部，您将遇到更多麻烦，特别是如果您以百分比为基础。祝你好运！

于 2013-11-07T01:35:13.947 回答