如何在隱藏Div中居中多行文本Div

我有一個問題，需要垂直對齊div的居中放置一個段落。它們位於懸停在圖像上時觸發的滑動框內。無法使用display：inline-block，因爲它當前將其設置爲display：none;的默認狀態。請告訴我處理這個問題的最佳方法，我相信有人會有一個簡單的解決方案，這會讓我感到很蠢。提前致謝。如何在隱藏Div中居中多行文本Div

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

來源

2014-01-21 John Fasano

你要對齊的文本框是在每一個時間同一地點???在中間？？ –

你是否期待這一點..http：//jsfiddle.net/manojmcet/Fdud6/ – Manoj

您可以在.textboxdiv的使用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 
});

希望有所幫助。

來源

2014-01-21 13:48:27 Abhitalks

您可以查看以下鏈接可它會幫助你..

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; 

}

來源

2014-01-21 13:57:51

如何在隱藏Div中居中多行文本Div

回答

相關問題