获取内容对齐中心

Question

我正在尝试构建个人资料卡片视图，我正在使用 bootstrap。

我使用 class col-lg-3 构建两个 div 元素，另一个使用 col-lg-9。问题是 col-lg-9 中的内容没有居中对齐。它在右侧和左侧有更多的 space，我尝试了几乎所有东西以使它们居中。禁用边距和填充无效。

col-lg-9 在一排普通容器内。 col-lg-9 里面是内容。我这里有一个 bootplay 的样本，如果你标记容器，你可以看到带有 class 卡片的内容更正确 space。

这就是它的 html 代码

            <div class="col-lg-9" style="min-height: 100px; background-color: #333">
            <div class="container">
                <div class="card">
                    <div class="model-image">
                        <img src="img/elliot.jpg">
                    </div>
                    <div class="card-content">
                        <a class="card-header">Team Fu</a>
                     <div class="meta">
                        <span class="date">Create in Sep 2014</span>
                    </div>
                </div>
                    <div class="card-footer">
                        <a href="#">ds</a>
                    </div>
                </div>
            </div>
        </div>

我上传了，这样你就可以看到整个网站了。为了更好地理解 demo

Answer 1

如果您为所有 .card div 添加一个额外的容器，您将使其居中：

<div class="container text-center"> 
 <div class="cards-container" style="display:inline-block; box-sizing:border-box;">

   <!-- here all your .card divs -->

  </div>
</div>

您可以在 css 文件中添加卡片容器的 css。

Answer 2

使用 bootstrap 时，只需将文本中心 class 添加到您的 div 中，它将使您的元素和所有子元素居中。

我建议使用内联 css 而不是将 css 放在外部样式表中。以后维护起来会方便很多

Answer 3

<div class="card-content text-center">
    <a class="card-header">Team Fu</a>
    <div class="meta">
    <span class="date">Create in Sep 2014</span>
</div>

获取内容对齐中心

get content align center

html

css

margin

padding