Использование CSS для выравнивания изображений панели инструментов в центре

Question

Я установил свой край и дополнение для submenu-img, чтобы выровнять изображения панели инструментов до центра, но, похоже, он не выравнивается по центру на 100%, и когда я пытаюсь восстановить окно браузера, панель инструментов выравнивание потеряет форму.

Я сделал демо на jsFiddle http://jsfiddle.net/AZdat/

Это исходный HTML-код

<div class="submenu"> 
<div class="submenu-img"> 
    <a href="abc.com"><div class = "icon-home"></div></a> 
    <a href="abc.com"><div class = "icon-groups"></div></a> 
    <a href="abc.com"><div class = "icon-members"></div></a> 
    <a href="abc.com"><div class = "icon-favorite"></div></a> 
</div> 
</div> 

CSS

.submenu { 
    background-color: #353535; 
    overflow: hidden; 
    position: relative; 
} 
.submenu-img { 
    float: left; 
    position: inherit; 
    padding: 30px 0 30px 0; 
    margin-left: 20%; 
    margin-right: 20%; 
} 
.submenu-img .icon-home { 
    background-image: url(http://imageshack.com/a/img607/9549/j3oe.png); 
    background-repeat: no-repeat; 
    display: block; 
    position: relative; 
    height: 56px; 
    width: 41px; 
    margin: 0 55px 0 0; 
    float:left; 
} 
.submenu-img .icon-groups { 
    background-image: url(http://imageshack.com/a/img191/1220/9sb7.png); 
    background-repeat: no-repeat; 
    display: block; 
    position: relative; 
    height: 54px; 
    width: 49px; 
    margin: 0 55px 0 0; 
    float: left; 
} 
.submenu-img .icon-members { 
    background-image: url(http://imageshack.com/a/img62/4964/6spa.png); 
    background-repeat: no-repeat; 
    display: block; 
    position: relative; 
    height: 54px; 
    width: 64px; 
    margin: 0 55px 0 0; 
    float: left; 
} 
.submenu-img .icon-favorite { 
    background-image: url(http://img838.imageshack.us/img838/7659/ojv5.png); 
    background-repeat: no-repeat; 
    display: block; 
    position: relative; 
    height: 58px; 
    width: 78px; 
    margin: 0 55px 0 0; 
    float: left; 
} 

Answer 1

1) Добавить text-align:center родителю (.submenu)

2) Добавить display:inline-block; ребенку (.submenu-img) а также Удалить float:left от ребенка

3) Снимите правый край на окончательный значок

FIDDLE

.submenu { 
    background-color: #353535; 
    overflow: hidden; 
    position: relative; 
    text-align:center; /* add this rule*/ 
} 
.submenu-img { 

    position: inherit; 
    padding: 30px 0 30px 0; 
    margin-left: 20%; 
    display:inline-block; /* add this rule */ 
    margin-right: 20%; 
} 
 .submenu-img .icon-favorite { 
    background-image: url(http://img838.imageshack.us/img838/7659/ojv5.png); 
    background-repeat: no-repeat; 
    display: block; 
    position: relative; 
    height: 58px; 
    width: 78px; 
    margin: 0;  /* Removed margin here */ 
    float: left; 
}