html - 如何垂直对齐 :hover 上的文本

标签 html css

:hover 上文本的垂直对齐不起作用。同样在悬停后,整个帖子区域应该被指针光标覆盖并且应该可以点击,但事实并非如此。

HTML

<div class="photoset post-background">
    <div class="imgoverlay text-light">
        <a href="{Permalink}">
            <div class="photos">
            {block:Photos}
                <img alt="" src="{PhotoURL-500}">
            {/block:Photos}     
            </div>
            <div class="overlay">
                <span class="overlaycolor"></span>
                <div class="overlayinfo">
                {block:ContentSource}
                    <a href="{Permalink}"><h6>{SourceTitle}</h6></a>
                {block:ContentSource}
                </div>
            </div>
        </a>
    </div>    
</div>

CSS

.imgoverlay {
    position: relative;
    overflow: hidden;
    display: block;
    max-width: 100%;
}

.imgoverlay img {
    -webkit-transition: all .4s ease;
    -moz-transition: all .4s ease;
    -o-transition: all .4s ease;
    -ms-transition: all .4s ease;
    transition: all .4s ease;
}

.imgoverlay .overlay {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: 0;
    filter: alpha(opacity=0);
    -ms-filter: "alpha(Opacity=0)";
    -webkit-transition: opacity .3s ease;
    -moz-transition: opacity .3s ease;
    -o-transition: opacity .3s ease;
    -ms-transition: opacity .3s ease;
    transition: opacity .3s ease;
}

.imgoverlay:hover .overlay {
    opacity: 1;
    filter: alpha(opacity=100);
    -ms-filter: "alpha(Opacity=100)";
}

.imgoverlay .overlaycolor {
    width: 100%;
    height: 100%;
    background: {color:Post Hover};
};

示例 http://www.jnck.sk/

感谢您的帮助!

最佳答案

display:block 中使用 span 而不是链接内的 div。像 div 这样的 block 元素不应该在内联 block 中。

对于文本的垂直对齐,您可以使用即:

.overlayinfo {
    position: relative;
    top: 50%;
    transform: translateY(-50%); 
}

http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/

关于html - 如何垂直对齐 :hover 上的文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27034758/

相关文章:

php - Jquery 在 php echo 中显示隐藏的 Div

javascript - 根据另一个选定的下拉列表更改下拉列表中的选项值

javascript - jQuery 两个选项卡

javascript - 将文本包裹在不规则形状内

css - Chrome 的 Firebug Lite 破坏了悬停效果和鼠标悬停事件

html - 组合悬停不起作用

jquery - 如何保留多页模板 PhoneGap?

jquery - 搜索栏在 Bootstrap 崩溃时超出下拉菜单

javascript - 我们如何使用 jquery 在 url 中传递 id?

javascript - 带参数的jQuery淡入淡出函数