html – 垂直在悬停时对齐内容

概述我在Stack上看了很多文章,但无法找到答案. 我正在尝试在悬停图像时显示内容.我做到了这一点.但我需要垂直居中.一些块上会有多条线. 我在这里创建了一个JSFiddle：https://jsfiddle.net/wkmepjnk/ 任何帮助都会很棒！ 谢谢 我的HTML是： <div class="grid-wrapper"> <div class="grid- 我在Stack上看了很多文章,但无法找到答案.

我正在尝试在悬停图像时显示内容.我做到了这一点.但我需要垂直居中.一些块上会有多条线.
我在这里创建了一个Jsfiddle：https://jsfiddle.net/wkmepjnk/

任何帮助都会很棒！
谢谢

我的HTML是：

<div >                <div >                    <img src="images/qdeck-logo.png">                        <div >                        <span>                            <div >                            <h1>QDeck</h1>                            <p>Q-Deck® decking or deckboards are available in four standard timber profiles,two anti-slip resistant timber profiles kNown as Q-grip® and a composite profile in a range of colours kNown as Q-Deck Twinson.</p>                            <div >More Info</div>                            </div>                        </span>                    </div>                </div>                <!--Close GrID Single-->            </div>            <!--Close GrID Wrapper-->

我的CSS：

.grID-wrapper {    wIDth:100%;    height:auto;    background-color:#ffffff;    -webkit-Box-shadow: 0px -11px 10px -11px rgba(0,0.75);    -moz-Box-shadow: 0px -11px 10px -11px rgba(0,0.75);    Box-shadow: 0px -11px 10px -11px rgba(0,0.75);}.grID-single {    wIDth:25%;    height:auto;    margin-right:-5px;    display:inline-block;    border:1px solID #e0e3e6;    position: relative;}.grID-single h1 {    Font-family: 'montserratlight';    Font-size:25px;    line-height:30px;    color:#ffffff;    text-transform:uppercase;    letter-spacing:2px;    margin-bottom:10px;}.grID-single img {    wIDth:100%;    height:auto;    margin-bottom:-5px;}.grID-single .grID-content {    position: absolute;    wIDth: 100%;    height: 100%;    top: 0;    left: 0;    background: #1ABC9C;    opacity: 0;    Transition: opacity 0.1s;    text-align:left;}.grID-single .grID-content span {    display: block;    position:absolute;    top:10%;    left:10%;    wIDth:80%;    height:auto;    text-align:center;}.grID-single .grID-content span p {     Font-family: 'montserratlight';    Font-size:14px;    line-height:21px;    color:#ffffff;    margin-bottom:15px;    letter-spacing:0px;}.grID-single .grID-content span p strong {      color:#a1cc3a;    margin-bottom:4px;}.grID-single:hover .grID-content {    opacity: 1;}.hover-button {    display:inline-block;    wIDth:auto;    height:40px;    background-color:#2C3E50;    padding:0px 20px;    Font-family: 'montserratlight';    Font-size:15px;    line-height:40px;    color:#ffffff;}

解决方法 您想要垂直居中显示的跨度.grID-single .grID-content范围应该是top：50％;和margin-top：-x; x =跨度高度的一半.
在你的情况下添加：

.grID-single h1 {    margin-top: 0;}

jdfiddle

总结

以上是内存溢出为你收集整理的html – 垂直在悬停时对齐内容全部内容，希望文章能够帮你解决html – 垂直在悬停时对齐内容所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。