Question

上的代码示例

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);
}

Answer 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相对于其在文档流中的位置移动，将其直接放在其上方的元素上。

Answer 2

要做到这一点，你需要稍微改变一点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。如果你需要填充顶部，你会遇到更多的麻烦，特别是如果你的基础是一个百分比。祝你好运！

两个div的垂直中间对齐在<li>元素</li>内相互重叠

2 个答案: