Центр нескольких элементов в текущем фиксированном 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

если добавить поддельные гибкий/оправдаться-контент вы можете иметь что-то близкое к тому, что вы ищете: 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; 
} 

альтернатива с UpArrow всегда вверху справа 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 * { 

}