html - 为什么我的 Bootstrap 专栏没有将其内容居中？`

Question

我有以下基本布局，其中显示闪存卡 - detail-card:

<div class="col-md-4"></div>
<div id="cardContainer" class="col-md-4 text-center detail-card-container">
    @Html.Partial("_DetailCard", cardModel)        
</div>
<div class="col-md-4"></div>

我知道我可以只使用 col-offset 但我有其他两列的计划。

我这里的设想是把页面分成三栏，给中间一栏，detail-card-container，类text-center，这样里面的内容div 应该在其中水平居中。

然而，当我启动该应用程序时，显示如下:

蓝色是 detail-card-container 中用于 'detail-card 的可用空间，用红色标出。详情卡片固定宽度为 200，可用空间约为 400+。这是显示在其可用空间的左侧，而不是按预期显示在中心。图像中绿色左侧和右侧的空白区域是空的col-md-4` div。

我做错了什么？

Answer 1

也许你可以给一个特定的宽度，display: block，加上margin-left: auto, margin-right:自动。