Search code examples
htmlcssvertical-alignment

Vertical align inside div, vertical-align: middle not working

Vertical-align: middle; is not working.

From css file :
#header {height:150px; text-align: center; vertical-align: middle;}

<div id="header">
    <img alt="" id="logo" src="images/logo.png" />
</div>

I would wrap the logo inside another div if it helps to align it to the center of the wrapper div.

Solution

  • You can do this only by padding, because other two ways line-height and vertical-align can't work on img....

    Write 

    #logo
{
padding: 20px 0;
}

    20px can be anything as you require.