Question

我正在创建缩略图库。我将它悬停在图像上，您可以看到标题和说明。我希望标题和描述集中在悬停div中。

因为我将悬停div定位为绝对值，所以我无法使用常用的表格方法进行垂直对齐。每当我调整视口大小时，文本就不再位于中心。

对此有任何帮助将不胜感激。

以下是jsfiddle示例：http://jsfiddle.net/Forresty/2snra4tL/1/

以下是代码：

HTML：

<a class="work_item_link" href="#">
    <div class="work_item">
        <img src="http://www.personal.psu.edu/ivs5030/plant.jpg" >                                
        <div class="item_hover">  
            <div class="item_description">
                <h4>Item Heading</h4>
                <p>ITEM DESCRIPTION</p>
            </div>
        </div>
    </div>
</a>

<a class="work_item_link" href="#">
    <div class="work_item">
        <img src="http://www.personal.psu.edu/ivs5030/plant.jpg">

        <div class="item_hover">   
            <div class="item_description">
                <h4>Item Heading</h4>
                <p>ITEM DESCRIPTION</p>
            </div>
        </div>
    </div>
</a>

<a class="work_item_link_no_margin" href="#">
    <div class="work_item">
        <img src="http://www.personal.psu.edu/ivs5030/plant.jpg">

        <div class="item_hover">
            <div class="item_description">
                <h4>Item Heading</h4>
                <p>ITEM DESCRIPTION</p>
            </div>
        </div>
    </div>
</a>

CSS：

.work_item_link {
    position: relative;
    width: 32%;
    height: auto;
    float: left;
    margin-right: 2%;
    //overflow: hidden;
    &:hover {
        .item_hover {
            opacity: 1;
        }
    }
    img {
        width: 100%;
        display: block;
    }
}
.work_item_link_no_margin {
    position: relative;
    width: 32%;
    height: auto;
    float: left;
    //overflow: hidden;
    &:hover {
        .item_hover {
            opacity: 1;
        }
    }
    img {
        width: 100%;
        display: block;
    }
}
.item_hover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: red;
    opacity: 0;
    transition: all 1s;
}

Answer 1

我回答了自己的问题。

最终代码可以在这里看到：http://jsfiddle.net/Forresty/2snra4tL/4/

我添加了另一个div作为包含包含文本的div的表。

再次感谢。

HTML：

 <a class="work_item_link" href="#">
                            <div class="work_item">
                                <img src="http://www.personal.psu.edu/ivs5030/plant.jpg" >                                
                                <div class="item_hover">
                                    <div class="center">
                                    <div class="item_description">
                                        <h4>Item Heading</h4>
                                        <p>ITEM DESCRIPTION</p>
                                    </div>
                                    </div>
                                </div>
                            </div>
                        </a>
 <a class="work_item_link" href="#">
                            <div class="work_item">
                                <img src="http://www.personal.psu.edu/ivs5030/plant.jpg">

                                <div class="item_hover">
                                    <div class="center">
                                    <div class="item_description">
                                        <h4>Item Heading</h4>
                                        <p>ITEM DESCRIPTION</p>
                                    </div>
                                    </div>
                                </div>
                            </div>
                        </a>
 <a class="work_item_link_no_margin" href="#">
                            <div class="work_item">
                                <img src="http://www.personal.psu.edu/ivs5030/plant.jpg">

                                <div class="item_hover">
                                    <div class="center">
                                    <div class="item_description">
                                        <h4>Item Heading</h4>
                                        <p>ITEM DESCRIPTION</p>
                                    </div>
                                    </div>
                                </div>
                            </div>
                        </a>

SCSS：

.work_item_link {
    position: relative;
    width: 32%;
    height: auto;
    float: left;
    margin-right: 2%;
    &:hover {
        .item_hover {
            opacity: 1;
        }
    }
    img {
        width: 100%;
        display: block;
    }
}
.work_item_link_no_margin {
    position: relative;
    width: 32%;
    height: auto;
    float: left;
    &:hover {
        .item_hover {
            opacity: 1;
        }
    }
    img {
        width: 100%;
        display: block;
    }
}
.item_hover {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: red;
    opacity: 0;
    transition: all 1s;
}

.center{
    width: 100%;
    height: 100%;
    display: table;
    text-align: center;
}

.item_description{
    display: table-cell;
    vertical-align: middle;

    p, h4{
        margin: 0;
    }
}

Answer 2

以下是对齐文字的方法：

<强>水平

.item_description p,
.item_description h4{
  text-align:center;   
}

<强>垂直：

.item_description{
   position: relative;
   margin-top: 50%;
   -webkit-transform: translateY(-100%);
   -ms-transform: translateY(-100%);
   transform: translateY(-100%);    
}

Fixed Fiddle

Answer 3

... FFF

我太晚了。我希望能够提供我的第一个答案...... 我为你做了一个很好的fiddle。我的技术：

transform: translate(-50%, -50%);
top: 50%;
left: 50%;
position: relative;

响应式垂直对齐文本在绝对定位的div内

3 个答案: