Question

我知道这个问题已经被问了好几次，一般我可以自己解决，但由于某种原因我无法将这些图标放在中心位置。他们总是保持一致。如果SO的好人不介意看一看，我会非常感激。这可能是一个简单的修复，我只是忽略了一些东西。

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;    
}

关于代码的一些注释。在调用之前，居中图标不会正常显示。使用display：none表示不占用空间。

Answer 1

对CSS进行以下更改：

#footerInside {
    width:  500px;
    margin: 0 auto;
}
#footerInside div {
    display: block;
    float: left;
}

FIDDLE： http://jsfiddle.net/dzort1rb/

Answer 2

您的代码对我来说很好

在您需要的父class="text-center"

中使用div

Div在另一个Div中心 - 左对齐？

2 个答案: