html - Bootstrap 列以 img 为中心但不以 div 为中心

Question

我在 Bootstrap 列中居中时遇到问题。我有一个使用图像的占位符页面(一个内部有图像和文本的白框)，我需要将其更改为方形白色 div，其中添加了图像并手动添加了文本。

当我以第二种方式实现时，我的列突然失去了居中状态。

这是 centered one 的代码笔和 uncentered one .

未居中的相关 HTML:

<div class="col-xs-4 column-centered">
                <a href="../faq/category_3.html">
                    <div class="img-with-text">
                        <img src="img/Blue/VideoCollaboration-Blue.png"></img>
                        <p><b>Video Collaboration</b></p>
                    </div></a>
                </div>

居中相关 HTML:

<div class="col-xs-4 column-centered">
                <div class="img-with-text">
                    <a href="../faq/category_7.html"><img src="img/temp_image.png" alt="VideoCollaboration" /></a>
                </div></div>

我真的很想避免使用偏移量，因为那不是真正居中的..

Answer 1

尝试

.img-with-text{
    display: inline-block;
}

或

.img-with-text{
    margin: 0 auto;
}