悬停时垂直对齐内容

Question

我看了很多关于 Stack 的文章，但找不到答案。

我试图在悬停图像时显示内容。我已经做到了。但我需要它垂直居中。某些块上会有多行.. 我在这里创建了一个 JSFiddle：https://jsfiddle.net/wkmepjnk/

任何帮助都会很棒！ 谢谢

我的html是：

<div class="grid-wrapper">

                <div class="grid-single">
                    <img src="images/qdeck-logo.png">
                        <div class="grid-content">
                        <span>
                            <div class="hover-content">
                            <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 class="hover-button">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,0,0.75);
    -moz-box-shadow: 0px -11px 10px -11px rgba(0,0,0,0.75);
    box-shadow: 0px -11px 10px -11px rgba(0,0,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;

}

Answer 1

您要垂直居中显示的此跨度 .grid-single .grid-content span 应具有 top:50%; 和 margin-top:-x;，其中 x = 跨度高度的一半。
只是在你的情况下添加：

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

jdfiddle

Answer 2

我会尝试使用flex 和justify-content:center; align-items:center;：

.grid-wrapper {
  width: 100%;
  height: auto;
  background-color: #ffffff;
  -webkit-box-shadow: 0px -11px 10px -11px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px -11px 10px -11px rgba(0, 0, 0, 0.75);
  box-shadow: 0px -11px 10px -11px rgba(0, 0, 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 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;
  display: flex;/*add flex*/
  justify-content: center;/*add this*/
  align-items: center;/*add this*/
}
.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-content span {
  border: solid 1px;
}

<div class="grid-wrapper">
  <div class="grid-single">
    <img src="http://placehold.it/400x400">
    <div class="grid-content"> <span>
			            	<div class="hover-content">
			            	<h1>QDeck</h1>
			            	<div class="hover-button">More Info</div>
			            	</div>
			            </span>

    </div>
  </div>
  <!--Close Grid Single-->
</div>
<!--Close Grid Wrapper-->

Answer 3

有一种方法可以适应扩展文本。我试过你的演示，但设置有点复杂，所以我从头开始做了一个快速的演示给你。关键是父级的display: table; 和子级的display: table; cell; vertical-align: middle;。

http://codepen.io/anon/pen/bVzZEL

<div class="wrapper">
  <img src="http://placehold.it/300x200" alt="" />
  <div class="overlay">
    <h3>Great Title</h3>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis totam deleniti.</span>
    <button class="btn btn-primary">View</button>
  </div>
</div>

.wrapper{
  display: table;
  width: 300px;
  height: 200px;
}

.overlay{
  display: none;
  vertical-align: middle;
  width: 300px;
  height: 200px;  
  background: #EEE;
  text-align: center;
}

.overlay .btn{
  margin-top: 5px;
}

.overlay h3{
  margin-top: 0;
}

.wrapper:hover img{
  display: none;
}

.wrapper:hover .overlay{
  display: table-cell;
}

Answer 4

尝试用它来代替这些样式

.grid-single .grid-content {
    background: #1abc9c none repeat scroll 0 0;
    display: table;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    text-align: left;
    top: 0;
    transition: opacity 0.1s ease 0s;
    width: 100%;
}

.grid-single .grid-content span {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    width: 80%;
}

Answer 5

好的.. 所以在完成我的代码之后，我想出了如何做到这一点。

你可以在这里看到它的工作原理：https://jsfiddle.net/x7s6f9jm/

我现在可以在 div 中添加我想要的任意长度的文本，并且非常适合。

我已将我的 css 更改为：

.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: table;
    position:absolute;
    left:10%;
    width:80%;
    height:100%;
    text-align:center;
}

.hover-content {
    display:table-cell;
    background-color:#ff6600;
    vertical-align:middle;
}

感谢大家的帮助！