垂直對齊線的高度不起作用，因爲它應該

-1

div.Holder { 
height: 45px; 
line-height: 45px; 
text-align: center; 
border-top: 3px #E7E7E7 solid; 
color: #535353; 
}

內該div有跨度這樣的選項：

.Holder > span { display: inline-block; 
vertical-align: middle; 
line-height: 15px; 
font-size: 13px; 
font-weight: bold; 
}

所以文本插入

<div class="Holder"><span> here </span></div>

應居中垂直LY和水平，這是在文件與

'<!DOCTYPE html>「，

，但是當我插入這樣的元素，以

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

頁面中的文本只是去到div的頂部。

除非我刪除跨度元素line-height屬性，但這時如果有文字的多行 - 第二行是不可見的，因爲文本使用line-height: 45px.

我應該如何處理這個問題呢？

來源

2014-02-14 Tautvydas

此代碼將無法正常工作嘗試這樣的事情

div.Holder { 
    display: block; 
    height: 45px; 
    margin: 0 auto; 
} 

div.Holder > span { 
    display: table; 
    height: 15px; 
    margin: 0 auto; 
    padding: 15px 0; 
    top: 50%; 
}

例如： JSFIDDLE DEMO

，並始終用CSS重置

來源

2014-02-14 09:48:14 arclite

你的榜樣文雲下的div空間：HTTP： //imageshack.com/a/img541/2217/2x1d.png，因爲，15px的填充...我想我會使用位置：絕對頂部：50％，邊距頂部：-half跨度的高度，這將使用javascrip來定義t ... – Tautvydas

如果你想使用js到這將是更好，更安全:) – arclite

垂直對齊線的高度不起作用，因爲它應該

回答

相關問題