css - Centering float:left thing vertically -
i can't figure out how center float:left object vertically. imagine set position of menu bar vertically (the height of y-axis) think answer
// html part
<div class="menu_simple"> <ul> <li><a href="#">one</a></li> <li><a href="#">two</a></li> </ul>
//css
.menu_simple ul { float:left; margin: 0; padding: 0; width:100px; list-style-type: none; box-shadow: 5px 8px 5px #888888; } .menu_simple ul li { border: 1px solid #0066cc; text-decoration: none; color: white; padding: 10.5px 11px; background-color: #3b3b3b; display:block; } .menu_simple ul li a:visited { color: white; } .menu_simple ul li a:hover, .menu_simple ul li .current { color: white; background-color: #5fd367; }
first set position: absolute
menu div, set top
50% , transform option -50%.
source: https://css-tricks.com/centering-css-complete-guide/
hope helps
Comments
Post a Comment