垂直對齊不工作？

-1

我想將文本居中在我創建的「人造」表的單元格中間。（人工，因爲它使用的div）垂直對齊不工作？

在CSS樣式我添加這些行：

text-align:center; 
vertical-align:middle;

通常做的伎倆。在這種情況下，他們不會。下面是完整的源代碼：

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset='UTF-8'> 

    <title>asd</title> 
    <style> 
     body { 
      padding:0; 
      margin:0; 
     } 
    .Table { 
     position:absolute; 
     left:25px; 
     top:275px; 
     border:none; 
     width:650px; 
     height:40.99999px; 
     border-top:1px solid black; 
     border-left:1px solid black; 
} 
.Cell { 
    float:left; 
    width:107.3333px; 
    height:40px; 
    border-right:1px solid black; 
    border-bottom:1px solid black; 

    font-weight:bold; 
    text-align:center; 
    vertical-align:middle; 
}  
    </style> 
</head> 

<body> 
     <div class="Table"> 
     <div class="Cell ">Hello</div> 
     <div class="Cell ">Hello</div> 
     <div class="Cell ">hihi</div>   
      <div class="clear"></div> 
     <div class="Cell "></div> 
     <div class="Cell "></div> 
     <div class="Cell "></div> 
     </div> 
</body> 
</html>

來源

2013-07-30 Bloodcount

您可以將它發佈到小提琴（jsfiddle.net）...這種方式會更容易幫助:-) – mooonli

垂直對齊[適用於內嵌級和表格元素]（https：//開發人員.mozilla.org/en-US/docs/Web/CSS/vertical-align） – godfrzero

vertical-align不會對塊元素（div的）工作，你的情況，你可以使用line-height: 40px;來代替。給人一種文本元素的行高度等於父的高度將圍繞它verically

來源

2013-07-30 06:53:49

謝謝，編輯清除了我的問題。當定時器到期時，我會將其標記爲答案 – Bloodcount

vertical-align不適合div工作，它適用於表格單元格

來源

2013-07-30 06:55:37 asifsid88

添加到您的CSS

來源

2013-07-30 06:56:09

添加物業display:table-cell;爲它工作

來源

2013-07-30 06:56:13 defau1t

使用這個CSS

土特產品應使用display:table;和display:table-cell;財產

http://jsfiddle.net/MepnV/

body { 
      padding:0; 
      margin:0; 
     } 
    .Table { 
     position:absolute; 
     left:25px; 
     top:275px; 
     border:none; 
     width:650px; 
    display:table; 
     height:40.99999px; 
     border-top:1px solid black; 
     border-left:1px solid black; 
} 
.Cell { 

    width:107.3333px; 
    height:40px; 
    border-right:1px solid black; 
    border-bottom:1px solid black; 
    display:table-cell; 
    font-weight:bold; 
    text-align:center; 
    vertical-align:middle; 
}

來源

2013-07-30 06:56:57 Hushme

您已設置的高度像素爲.cell類，所以你可以做到以下幾點：

添加line-height: 40px;在你的CSS的.cell選擇。

來源

2013-07-30 07:00:58 jstwrt

垂直對齊不工作？

回答

相關問題