Question

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

当我以第二种方式实施它时，突然间我的专栏在那里失去了中心。

未经审核的相关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;
}

Answer 2

因为锚标签本质上是内联块，所以你必须将其更改为阻止并执行以下操作。

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

.inline-block{
  display: inline-block;
}
.block{
  display: block;
}

Bootstrap列以img但不是div为中心

2 个答案: