使用 twitter bootstrap 將圖像僅在小屏幕上居中

Question

我有一個圖像，我試圖在 div 中間居中，但僅在使用 twitter bootstrap 的 xs 屏幕上。

在小屏幕和大屏幕上，布局如下所示：

當它轉到 xs 屏幕時，它看起來像這樣：

當文本從 xs 屏幕上的頁面上脫落時，我想讓圖像居中。

我這個 div 的 html 是這樣的：

HTML

        <div class="row">
                <div class="col-md-8 col-md-offset-2 col-sm-10 col-sm-offset-1">
                    <div class="col-xl-4 col-md-5 col-sm-6 col-xs-12">
                        <div class="img">
                        </div>
                    </div>
                    <div class="col-xl-8 col-md-7 col-sm-6 col-xs-12">
                        <div class="info">  
                        </div>
                        <div class="icons">
                            <ul class="list-inline icon-list">
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

img div 是包含我想要在小屏幕上居中的圖像的那個。

我嘗試了以下 CSS，但它不起作用：

CSS

.col-xs-12  > .img img {
display: block;
margin: 0, auto !important;
}

我不清楚為什么這不起作用。

Answer 1

只需使用 img 類在 div 的列上進行text-align 。 出於實際原因，以類centered調用它

.centered {
    text-align:center;
}

https://jsfiddle.net/udwtavzh/2/