如何在隐藏的 Div 中居中多行文本

Question

我在需要垂直对齐的 div 内将段落居中时遇到问题。它们位于将鼠标悬停在图像上时触发的滑动框内。不能使用 display: inline-block，因为它当前正在将其设置为 display: none; 的默认状态。请告诉我处理这个问题的最佳方法，我相信有人会有一个简单的解决方案，这会让我觉得很愚蠢。提前致谢。

http://jsfiddle.net/JohnWeb/rBsLx/13/

这是文本框 divs css

.textbox {
    max-width: 610px;
    height: 155px;
    padding: 10px;
    display: none;
    overflow: hidden;
    background: linear-gradient(to bottom, rgba(5, 58, 24, 0.65) 10%, rgba(0, 0, 0, 0.13) 83%, rgba(0, 0, 0, 0) 100%);
    border-radius: 0 10px 10px 0;
}

我之前发布过同样的代码，但我不知道这里的提问过程或礼仪，这不是以前的 jquery 问题，它在功能上按我需要的方式工作，但这次它是CSS。所以我重新发布它。 （在下面粘贴上一个问题）

How to handle a hide/show queue with multiple hidden divs smoothly

Answer 1

您可以在.textbox divs 上使用display: table-cell。移除 display: none 并在页面加载时将它们隐藏在 dom 就绪状态。现在您可以在div 上使用vertical-align:middle 使其垂直对齐。

演示：http://jsfiddle.net/abhitalks/rBsLx/15/

CSS：

.textbox {
    max-width: 610px;
    height: 155px;
    padding: 10px;
    display: table-cell; /* make it table-cell */
    vertical-align: middle; /* table-cell will allow vertical align */
    ...
}

JS：

$(document).ready(function () {
    $(".textbox").hide(); // hide the divs initially
    ... // your code
});

希望对您有所帮助。

Answer 2

您可以查看下面的链接可能会对您有所帮助..

Fiddle here

.textbox {
max-width: 610px;
height: 155px;
padding: 10px;
display: none;
overflow: hidden;
background: linear-gradient(to bottom, rgba(5, 58, 24, 0.65) 10%, rgba(0, 0, 0, 0.13) 83%, rgba(0, 0, 0, 0)    100%);
border-radius: 0 10px 10px 0;

}