悬停时垂直对齐内容

Posted 2023-03-06

【中文标题】悬停时垂直对齐内容

【英文标题】：Vertical Align content on hover

【发布时间】：2016-02-18 20:25:22

【问题描述】：

我看了很多关于 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;

【参考方案1】：

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

.grid-single h1 
    margin-top: 0;

jdfiddle

【讨论】：

嗨，Aminesrine，一旦我有多行文本，这个选项就不起作用了。或者如果我在 h1 标签下面有一个短段落，它就会太低了。有没有其他方法做吗？

【参考方案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-->

【参考方案3】：

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

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

<div class="wrapper">
  <img src="http://placehold.it/300x200"  />
  <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;

【讨论】：

嗨，Paul，它需要具有响应性，因此需要以百分比而不是像素为单位。

@ibollu CSS 技巧有几个选项，我想知道是否有适合你的选项：css-tricks.com/centering-css-complete-guide

【参考方案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%;

【讨论】：

这不起作用，不幸的是它没有填满父容器。

【参考方案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;

感谢大家的帮助！