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

和

   <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响应类，它将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

请删除..panel空类中的高度和宽度，并移除显示:表格单元格、文本对齐：..panel中的中心-空-内部类，然后运行，这就是工作。

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