Question

我无法弄清楚如何将浮动居中：垂直左侧物体。我想我可以垂直设置这个菜单栏的位置（Y轴的高度）我认为这将是答案

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

Answer 1

Fiddle example

首先为菜单div设置position: absolute，然后将top设置为50％，将转换选项设置为-50％。

来源：https://css-tricks.com/centering-css-complete-guide/

希望这有帮助

Answer 2

使用CSS position property。

根据您的情况，设置页面保留，<body>至position: relative;以及您要移动的部分; .menu_simple以下内容：

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

Answer 3

Flexbox可以很好地处理这类事情： http://codepen.io/simply-simpy/pen/rVwXyz
menu_simple { display:flex; justify-content: flex-start; align-items: center; height: 500px; border: 1px solid red; }

居中浮动：垂直左侧

3 个答案: