Не получается расположить иконки по центру экрана. Offset не вариант, margin: 0 auto не срабатывает. Буду благодарен за помощь.
<div id="header" class="container-fluid">
<div class="row">
<div class="col-xs-offset-2 top_menu_row1">
<div class="col-xs-4 col-sm-4 top_menu_icon1 top-menu-icon-all">
<div class="text_icon_name">Brands</div>
</div>
<div class="col-xs-4 col-sm-4 top_menu_icon2 top-menu-icon-all">
<div class="text_icon_name">Education</div>
</div>
<div class="col-xs-4 col-sm-4 top_menu_icon3 top-menu-icon-all">
<div class="text_icon_name">Categories</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-offset-2 top_menu_row2">
<div class="col-xs-4 col-sm-4 top_menu_icon4 top-menu-icon-all">
<div class="text_icon_name">Books</div>
</div>
<div class="col-xs-4 col-sm-4 top_menu_icon5 top-menu-icon-all">
<div class="text_icon_name">E-books</div>
</div>
<div class="col-xs-4 col-sm-4 top_menu_icon6 top-menu-icon-all">
<div class="text_icon_name">Trending</div>
</div>
</div>
</div>
.top_menu_icon1, .top_menu_icon2, .top_menu_icon3, .top_menu_icon4, .top_menu_icon5, .top_menu_icon6{
background: url(../img/drawable-ldpi/sprites.png) no-repeat;
}
.top_menu {
display: inline-block;
position: relative;
}
.top-menu-icon-all {
width: 36px;
height: 36px;
padding-bottom: 50px;
padding-right: 65px;
cursor: pointer;
z-index: 100;
position: relative;
}
.top_menu_icon1{
background-position: -208px -56px ;
}
.top_menu_icon2{
background-position: -307px -56px ;
}
.top_menu_icon3{
background-position: -407px -57px ;
}
.top_menu_icon4{
background-position: -209px -107px ;
}
.top_menu_icon5{
background-position: -308px -108px ;
}
.top_menu_icon6{
background-position: -407px -108px ;
}