中心按钮在Chrome中略有移动

Question

我的html代码看起来像这样（使用Bootstrap）：

<div class="row">
    <div class="col-md-4 col-md-offset-1" style="width: 37.5%">
        <span class="dualselect">
            <select class="form-control input-default select-inline" style="width: 100%" multiple="multiple">
            </select>
        </span>
    </div>
    <div class="col-md-1" align="center">
        <div class="dualselect">
            <div class="ds_arrow">
                <button class="btn btn-inverse">
                    <i class="fa fa-chevron-right"></i>
                </button>
                <br/>
                <button class="btn btn-inverse">
                    <i class="fa fa-chevron-left"></i>
                </button>
            </div>
        </div>
    </div>
    <div class="col-md-4"  style="width: 37.5%">
        <span class="dualselect">
            <select class="form-control input-default select-inline" style="width: 100%" multiple="multiple">
            </select>
        </span>
    </div>
</div>

这在IE或Firefox中运行得非常好。在Chrome中，带箭头的按钮未完全对齐：

问题似乎与align="center"有关。删除后，按钮在所有浏览器中对齐，但我希望它们居中。我该如何正确地做到这一点？

Answer 1

我有点惊讶所有浏览器都没有显示与Chrome相同的结果。问题是代码中的空白区域。在按钮代码周围删除它，看起来像这样：

<button class="btn btn-inverse">
    <i class="fa fa-chevron-right"></i>
</button><br/><button class="btn btn-inverse">
    <i class="fa fa-chevron-left"></i>
</button>

<强> bootply example

Answer 2

另一种方法是将每个<button>放入其自己的<div>中，然后删除<br/>，从而允许您保留代码美学的空白。

Answer 3

您也可以采取其他方式：

制作你的＆＃34;行＆＃34;具有属性的类＃34; position：relative＆＃34;，然后在你的＆＃34; col-md-1＆＃34; class set attribute＆＃34; position：absolute，left：50％，margin-left：-yourwidth in px＆＃34;并且你将集中在你的＆＃34; col-md-1＆＃34;。

但请记住，您还需要编辑其他人＆＃34; col-md-4＆＃34;