显示：表格单元格不居中格

我想将格式居中在一个div内，并使用display：table & display：table-cell方法。它居中，但离顶部几个像素。我能做些什么来纠正这个问题？显示：表格单元格不居中格

CSS 

html, body { 
    width: 100%; 
    height: 100%; 
} 

body,html { 
    margin: 0; 
    padding: 0; 
    color:#ffffff; 
    text-align: center; 
} 

#wrapper{ 
text-align: left; 
width: 940px; 
margin: 0 auto; 
margin-top: 22px; 
background-color: #ffffff; 
overflow: hidden; 
} 

header { 
width: 908px; 
height: 76px; 
display: table; 
border-style:solid; 
border-top-width: 16px; 
border-bottom-width: 16px; 
border-top-color: #ffffff; 
background-color: #cccccc; 
} 

#headerdiv { display: table-cell; vertical-align: middle; margin: 0; height: 28px; } 



HTML 

<div id="wrapper"> 

<header> 
<div id="headerdiv"><img src="logotest.gif" height="28" width="180" alt="test"></div> 
</header> 

</div>

来源

2013-04-05 Helium87

我做一个JSBIN您的问题，但我看不出你有什么问题，http://jsbin.com/aroyej/1 /编辑也许你有一个继承问题 – Natalia 2013-04-05 20:07:52

将纳塔利娅的JSBIN截图粘贴到Photoshop中显示图像周围的顶部和底部空间相同（在我的情况下是8px）。 – cimmanon 2013-04-05 20:30:34

@Natalia - 你可能没有看到问题的原因。 JSBin的结果iframe中的源代码在doctype之前有一个'

显示：表格单元格不居中格

相关问题