Div centering within another Div - left aligned? - css

Question

I know this question has been asked several time before, and generally I can fix it myself, but for some reason I can not get these icons to center. They are always left aligned. If the good people of SO wouldn't mind taking a look I would be much obliged. It is probably an easy fix, I'm just overlooking something.
HTML:
<div class="footerSection">
<div class="col-lg-4 col-md-4 col-sm-4 btn-toolbar">
<span id="" class="btn btn-lg footerMainButton"></span>
</div>
<div id="footerInside" class="col-lg-4 col-md-4 col-sm-4">
<div class="divOuter col-lg-12">
<div class="col-lg-2 col-md-2 col-sm-2 divCenter">
<button type="button" class="footerSave">
<img class="footerSvg" src="../../img/icon_disk_save.svg" alt="save" /><br /><span>Save</span>
</button>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 divCenter">
<button type="button" class="footerPreview">
<img class="footerSvg" src="../../img/icon_play.svg" alt="preview" /><span><br />Preview</span>
</button>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 divCenter">
<button type="button" class="footerDelete">
<img class="footerSvg" src="../../img/icon_trash.svg" alt="delete" /><br /><span>Delete</span>
</button>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 divCenter">
<button type="button" class="footerView">
<img class="footerSvg" src="../../img/icon_long_right_arrow.svg" alt="view" /><span><br />View/Edit</span>
</button>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 divCenter">
<button type="button" class="footerRemove">
<img class="footerSvg" src="../../img/icon_minus.svg" alt="remove" /><span><br />Remove</span>
</button>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 divCenter">
<button type="button" class="footerNewMedia">
<img class="footerSvg" src="../../img/icon_upload_arrow.svg" alt="New Media" /><span><br />New Media</span>
</button>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4">
<button type="button" class="mapMarkerStyle">
<img style="width: 36px;height: 36px;" src="../../img/icon_map_pin_blue.svg" alt="Map Pin" /><span></span>
</button>
</div>
</div>
CSS:
.footerSection {
width: 100%;
height: 100px;
background-color: #424242;
display: block;
position: fixed;
z-index: 999;
padding: 20px 0 20px;
bottom: 0;
}
#footerInside {
display: block;
float: left
}
.divOuter {
margin: 0 auto;
}
.divCenter {
text-align: center;
}
Some notes on the code. The centered icons are display none normally until called. Using display: none as to not take up space.

Answer 1

Make these changes to your CSS:
#footerInside {
width: 500px;
margin: 0 auto;
}
#footerInside div {
display: block;
float: left;
}
FIDDLE: http://jsfiddle.net/dzort1rb/

Answer 2

Your code is working fine for me
Use class="text-center" in the parent div where you required