CODEWITHSUNDEEP
css
Plain_Dude_Sleeping_Alone
Plain_Dude_Sleeping_Alone

Reputation: 1889

Centering float:left thing vertically

I can't figure it out how to center float:left object vertically. I imagine that I could set the position of this menu bar vertically (The height of Y-axis) I think that 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;
        }

Upvotes: 3

Views: 81

Answers (3)

WPZA
WPZA

Reputation: 931

Use the CSS position property.

Set the page hold, in your case the <body> to position: relative; and the part you wish to move, in your case; .menu_simple to the following:

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

Upvotes: 2

Scott Simpson
Scott Simpson

Reputation: 3850

Flexbox works nicely 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; }

Upvotes: 1

Todd J.
Todd J.

Reputation: 267

Fiddle example

First you set position: absolute for the menu div, then set top to 50% and the transform option to -50%.

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

Hope this helps

Upvotes: 3

Related Questions