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

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

演示： 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;

}

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

2 个答案: