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/

Answer 2

您必须在图像的父级中输入高度。

.panel-empty-inside {
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    height: 400px;
}

效果很好。

Answer 3

您需要将 display: table 添加到带有 display:table-cell 的容器中

这里需要添加

.panel-empty {
display:table;
}

Answer 4

请删除.panel-empty类中的高度和宽度，并删除.panel-empty-inside类中的display:table-cell,text-align:center，然后运行即可。

    .panel-empty{
        text-align:center;
    }
    .panel-empty-inside {
        vertical-align: middle;
    }
    .box-inside {
        display:inline-block;
        vertical-align: top;
    }