html - 如何在隐藏的 Div 中居中显示多行文本

Question

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

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

这是文本框的div 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 div 上使用 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
});

希望对您有所帮助。