css Bootstrap 3中心图像

kgsdhlau 于 12个月前发布在 Bootstrap

关注(0)|答案(4)|浏览(133)

我试图把图像总是在中间和中心的一些元素，唯一的问题是，它不工作
这是我的代码

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

来源：https://stackoverflow.com/questions/31153902/bootstrap-3-center-image

4条答案

按热度按时间

siotufzp1#

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

赞(0）回复(0）举报 12个月前

5lhxktic2#

你必须把一个高度在父的形象。

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

字符串
它工作正常。

赞(0）回复(0）举报 12个月前

q9rjltbz3#

您需要使用display：table-cell将display：table添加到容器中
在这里，你需要加上

.panel-empty {
display:table;
}

字符串

赞(0）回复(0）举报 12个月前

unftdfkk4#

请在.panel-empty类中删除height和width，并在.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;
    }

字符串

赞(0）回复(0）举报 12个月前

我来回答

css Bootstrap 3中心图像

4条答案

相关问题

热门标签

最新问答