javascript - 在流体固定 div 中居中多个元素

Question

我正在尝试将多个元素(img 和按钮类型)置于固定在屏幕顶部的 div 中。我已经尝试了所有可以在互联网上找到的技巧，但都没有奏效。无论 window 的大小如何，我都希望它能正常工作。

<div id='FixedMenu'>
    <button class='MenuItem'>Home</button>
    <button class='MenuItem'>About</button>
    <img id='Main' src='http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/800px-Smiley.svg.png'></img>
    <button class='MenuItem'>Tools</button>
    <button class='MenuItem'>Events</button>
    <img id='CloseMenu' src='http://upload.wikimedia.org/wikipedia/commons/d/df/Chevron_up_font_awesome.svg'></img>
</div>

http://jsfiddle.net/clarinetking/2PGZS/37/

Answer 1

如果你添加一个假的 flex/justify-content 你可以得到接近你正在寻找的东西: http://jsfiddle.net/2PGZS/45/

#Main {
    vertical-align:middle;
    height:50px;
    width:80px;
}
#FixedMenu {
    position:fixed;
    margin:0 auto;
    top:0%;
    left:0%;
    background:#444444;
    width:100%;
    height:70px;
    transition: all 1s;
    text-align:justify;/* prepare fake flex justify */
}
#FixedMenu:after { /* add an extra line so inline content is justified */
    content:'';
    display:inline-block;
    width:100%;
}
#FixedMenu.active {
    background: rgba(0, 0, 0, 0.0);
}
button.MenuItem {
    height:40px;
    width:80px;
    vertical-align:middle;
}
#Start {
    margin-top:100px;
}
#CloseMenu {
    width:70px;
    height:70px;
    transition: all 1s;
    vertical-align:middle;
}
#CloseMenu.opacite {
    opacity:0.1;
}

总是在右上角的向上箭头的替代方案 http://jsfiddle.net/2PGZS/46/