爲什麼垂直對齊在jsfiddle上工作

相同來源，沒有區別，但垂直對齊只適用於jsfiddle。請幫我回答。這是HTML源代碼，它無法在Chrome工作：爲什麼垂直對齊在jsfiddle上工作

<html> 
<head> 
    <title>Demo</title> 
    <style> 
     .checkboxOfField 
     { 
      display: inline-block; 
      width: 100%; 
      background-color: red; 
      height: 40px; 
      line-height: 40px; 
     } 
    </style> 
</head> 
<body> 
    <span class="checkboxOfField"> 
     <input style="text-align: center; vertical-align: middle" type="checkbox" /> 
    </span> 
</body> 
</html>

這是的jsfiddle鏈接：http://jsfiddle.net/UghzT/ 它適用於Chrome瀏覽器。謝謝。

來源

2013-04-15 Leo Vo

可能是因爲Quirksmode？

添加Doctype！

來源

2013-04-15 11:12:40 dave

是的，在OS X'10.8.3'的Safari 6.0.3上本地測試，沒有文檔類型;那麼它會忽略垂直對齊。添加它會使垂直對齊再次彈出。 +1 – 2013-04-15 11:13:41

+1 JSFiddle在您的HTML – Bigood

上自動添加html5文檔類型，豎直對齊不做任何事情，它是在中間設置複選框的行高... – Brainfeeder

爲什麼要將樣式添加到input？它沒有做任何事情。 input有一個type="checkbox"屬性。因此text-align:center;有點奇怪，因爲裏面永遠不會有文字。即使是vertical-align屬性也不屬於那裏。在複選框內沒有任何內容可以對齊...

您的CSS代碼將執行以便對齊中間範圍內的所有內容。檢查this jsFiddle。我刪除了'樣式'屬性，它仍然很好。

來源

2013-04-15 12:31:55 Brainfeeder

爲什麼垂直對齊在jsfiddle上工作

回答

相關問題