如何在不使用內聯高度的情況下垂直對齊div中的文本

在下面的示例中，我試圖水平地對齊垂直中間的文本&。如何在不使用內聯高度的情況下垂直對齊div中的文本

出於某種原因，它不正確我試過幾個例子也

2012-07-04 Learning

這裏是你可以用你的CSS &得到的結果做什麼：http://jsfiddle.net/surendraVsingh/AMcnZ/31/

從.boxcaption刪除height。

.boxcaption{ 
    float: left; 
    position: absolute; 
    background: #000; 
    width: 100%; 
    text-align:center; /*Add this*/ 
    padding:5px 0 0 0; /*Add this*/ 
    opacity: .6; 
    /* For IE 5-7 */ 
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); 
    /* For IE 8 */ 
    -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; 
}

來源

2012-07-04 07:34:19 SVS

看看會發生什麼，如果我添加大標題http://jsfiddle.net/AMcnZ/26/ – Learning

是的，因爲有一個固定的高度給予框標題。 – SVS

那麼我怎樣才能解決這個問題 – Learning

您可以添加到您的CSS

text-align: center; 
line-height: 30px;

http://jsfiddle.net/JBnbG/4/

來源

2012-07-04 07:30:31

我提到的問題本身沒有使用內聯高度，我試過這種方法，但它有一個問題，如果標題很大，那麼它不會顯示由於inline-heigh：30px; – Learning

演示http://jsfiddle.net/AMcnZ/22/

第二演示http://jsfiddle.net/AMcnZ/32/

.boxcaption{ 
     float: left; 
     position: absolute; 
     background: #000; 
     height: 25px; 
     width: 100%; 
     opacity: .6; 
     padding-top:3px; 
     text-align:center; 
     /* For IE 5-7 */ 
     filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); 
     /* For IE 8 */ 
     -MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; 
     }

來源

2012-07-04 07:33:07

看看會發生什麼，如果我添加大標題http://jsfiddle.net/AMcnZ/27/。它不包裝的文字 – Learning

@KnowledgeSeeker：如果標題很大，圖像寬度很小，你怎麼能夠解決這個問題，選項是你必須改變字體大小，這是不好的選擇 –

標題不會很大但至少它應該能夠至少調整兩條線。 – Learning

如何在不使用內聯高度的情況下垂直對齊div中的文本

回答

相關問題