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

enter image description here

// 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;         } 

fiddle example

first set position: absolute menu div, set top 50% , transform option -50%.

source: https://css-tricks.com/centering-css-complete-guide/

hope helps


Comments

Popular posts from this blog

facebook - android ACTION_SEND to share with specific application only -

python - Creating a new virtualenv gives a permissions error -

javascript - cocos2d-js draw circle not instantly -