css - Display: Table-cell doesn't center the div -


i trying center image within div , used display:table & display: table-cell method. centered off few pixels top. can correct this?

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> 

add

img {     vertical-align:middle; } 

jsfiddle example


Comments

Popular posts from this blog

monitor web browser programmatically in Android? -

Shrink a YouTube video to responsive width -

wpf - PdfWriter.GetInstance throws System.NullReferenceException -