Menu
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.
915
You can do this by setting the display property to "flex." Then define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.
This is because text-align:center only affects inline elements, and <aside> is not an inline element by default. It is a block-level element. To align it, we will have to use something other than text-align , or turn it into an inline element.
The vertical-align property in CSS controls how elements set next to each other on a line are lined up. In order for this to work, the elements need to be set along a baseline. As in, inline (e.g. <span> , <img> ) or inline-block (e.g. as set by the display property) elements.
do this
#header {display:table;}
#logo {display:table-cell; vertical-align:middle;}
Reference
173
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
