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

Question

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

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

Answer 2

将text-align:center;添加到您的FixedMenu CSS 中

http://jsfiddle.net/2aUbv/

Answer 3

这里不需要js。纯 css。

#Main {
    position:relative;
    height:50px;
    width:80px;
    display: inline-block;
}
#FixedMenu {
    position:fixed;
    margin:0 auto;
    top:0%;
    left:0%;
    background:#444444;
    width:100%;
    height:70px;
    transition: all 1s;
    text-align:center;
}
#FixedMenu.active {
    background: rgba(0, 0, 0, 0.0);
}
button.MenuItem {
    display: inline-block;
    height:40px;
    width:80px;
    float:top;
}
#Start {
    margin-top:100px;
}
#CloseMenu {
    position:fixed;
    width:80px;
    height:80px;
    transition: all 1s;
}
#CloseMenu.opacite {
    opacity:0.1;
}
#FixedMenu * {
}