垂直对齐图像悬停img答案

【问题标题】：Align vertically images hover img垂直对齐图像悬停img
【发布时间】：2014-10-27 01:46:29
【问题描述】：

我有一个宽度相同但高度不同的图像网格。

悬停图像时，我想显示两个不同的链接以获取图像和作者的信息。

问题是我无法垂直调整图像上的链接：/

HTML：

                <div class="item">
                    <div class="img-work">
                        <img src="img/grid1.jpg" alt="" class="img-grid">
                        <a href="#" class="zoom"">
                            <img src="img/hover-item.png" alt="">
                        </a>
                        <a href="#" class="info">
                            <img src="img/hover-info.png" alt="">
                        </a>
                    </div>
                </div>

CSS：

div.img-work a.zoom {
   left: 31%;
   position: absolute;
   top: 27%;
   visibility: hidden;
   width: 38px;
}
div.img-work a.info {
   left: 50%;
   position: absolute;
   top: 27%;
   visibility: hidden;
   width: 39px;
}

jQuery:

    $('div.img-work').hover(function() {
        $(this).children('a').css('visibility', 'visible');
        $(this).children('img').css('opacity', '0.5');
    }, function() {
        $(this).children('a').css('visibility', 'hidden');
        $(this).children('img').css('opacity', '1');
    });

您看不到我不知道如何垂直对齐这些链接。任何提示将不胜感激。提前谢谢你

【问题讨论】：

标签： javascript jquery html css image

【解决方案1】：

您是否尝试过像position: relative 那样设置您的属性？您可能还想根据图像大小调整 left 和 top CSS 属性。

【讨论】：

【解决方案2】：

您的 .item 元素需要有一个 position: relative; 并且您的覆盖元素 (.info) 需要有：

position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
display: block;

【讨论】：

【解决方案3】：

这是一个 CSS 解决方案：http://jsfiddle.net/08vorn1s/。

图像在其容器内垂直和水平居中。如果图像需要底部对齐，您可以轻松调整代码。

HTML：

<div class = "grid">
    <div class = "row">
        <div class = "cell">
            <img src = "http://placehold.it/150x150 " />
            <div class = "links">
                <a href = "#">Info</a>
                <a href = "#">Author</a>
            </div>
        </div>
        <div class = "cell">
            <img src = "http://placehold.it/150x170 " />
            <div class = "links">
                <a href = "#">Info</a>
                <a href = "#">Author</a>
            </div>
        </div>
        <div class = "cell">
            <img src = "http://placehold.it/150x200 " />
            <div class = "links">
                <a href = "#">Info</a>
                <a href = "#">Author</a>
            </div>
        </div>
    </div>
</div>

CSS：

* {
    margin: 0;
    padding: 0;
}

body {
    padding: 10px;
}

.grid {
    display: table;
    width: 100%;
}

.grid .row {
    display: table-row;
}

.grid .row .cell {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    position: relative;
}

.cell > .links {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    display: none;
}

.cell:hover > img {
    opacity: 0.5;
}

.cell:hover > .links {
    display: block;
}

【讨论】：