Clever Geek Handbook

Float centering: vertical position to the left

I can't figure out how to center the float: the left object vertically. I suppose I could set the position of this menu bar vertically (Y-axis height). I think this would be the 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 a {
            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;
        }
+3


source to share


3 answers


Sample script

First you set position: absolute

for the menu div, then set top

to 50% and the transform parameter is -50%.



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

Hope it helps

+3


source


Use CSS property .

Set page retention, in your case <body>

- position: relative;

and the part you want to move in your case; .menu_simple

to the next:



.menu_simple {
    position: absolute;
    top: 50%;
    left: 0;
}
+2


source


Flexbox works great for this type of thing: http://codepen.io/simply-simpy/pen/rVwXyz
menu_simple { display:flex; justify-content: flex-start; align-items: center; height: 500px; border: 1px solid red; }

+1


source






More articles:


All Articles