Bootstrap 3 中心图像答案

【问题标题】：Bootstrap 3 center imageBootstrap 3 中心图像
【发布时间】：2015-07-01 14:59:50
【问题描述】：

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

这是我的代码

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/

【问题讨论】：

标签： css twitter-bootstrap-3 responsive-design

【解决方案1】：

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

【讨论】：

【解决方案2】：

您必须在图像的父级中放置一个高度。

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

效果很好。

【讨论】：

【解决方案3】：

您需要使用 display:table-cell 将 display: table 添加到容器中

这里，你需要添加

.panel-empty {
display:table;
}

【讨论】：

【解决方案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;
    }

【讨论】：