Center multiple elements in a fluid fixed div

Question

I am trying to center multiple elements, img and button types, in a div that is fixed to the top of the screen. I have tried all the tricks I could find on the internet but none have worked. I want it to work no matter what the windows' size is.

<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

Add text-align:center; to your FixedMenu css

http://jsfiddle.net/2aUbv/

Answer 2

if you add a fake flex/justify-content you can have something close to what you are looking for : 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;
}

alternative with uparrow always on top right http://jsfiddle.net/2PGZS/46/

Answer 3

There is no need in js here. Pure 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 * {

}