Bootstrap 3 中心图像

Question

我试图将图像始终放在某些元素的中间和中心，唯一的问题是它不起作用

这是我的代码

CSS

.panel - empty {
        width: 100 % ;
        height: 400 px; /* for demo only */
    }
    .panel-empty-inside {
        display: table-cell;
        text-align: center;
        vertical-align: middle;
    }
    .box-inside {

        display:inline-block;
        vertical-align: top;
    }

和HTML

   <div class="panel-empty">
                <div class="panel-empty-inside">
                    <div class="box-inside">
                        <img class="img-responsive center-block" src="http://www.gusonthego.com/wp-content/uploads/2012/04/Gus-Flying-Banner-Hello-nBG.png" alt="Banner"/>
                    </div>
                </div>
            </div>

这是工作小提琴 https://jsfiddle.net/DTcHh/9395/

Answer 1

您正在使用类img-responsive，它会添加display:block到您的图像中，并且无法使用text-align:center. 您可以使用 使已知宽度的块元素居中margin:0 auto。看看小提琴https://jsfiddle.net/DTcHh/9397/