获取内容居中对齐答案

【问题标题】：get content align center获取内容居中对齐
【发布时间】：2016-08-15 06:32:55
【问题描述】：

我正在尝试构建个人资料卡视图并为此使用引导程序。

我用 col-lg-3 类构建了两个 div 元素，另一个用 col-lg-9 构建了一个。问题是 col-lg-9 内的内容未在中心对齐。它在右侧和左侧有更多的空间，我尝试了几乎所有的东西来让它们居中。禁用边距和填充不起作用。

col-lg-9 在一行和一个普通容器内。 col-lg-9 里面是内容。我在bootplay 上有一个示例，如果你标记容器，你可以看到带有类卡的内容有更多空间。

这就是它的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

【问题讨论】：

标签： html css margin padding

【解决方案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。

【讨论】：

没有工作。仍然就像在图片或 bootply 中一样
我刚刚在 bootply 上对其进行了测试并且工作正常 - 通过将其添加到您的代码中
没问题 :) 很高兴我能帮上忙

【解决方案2】：

使用引导程序时，只需将 text-center 类添加到您的 div 中，它将使您的元素和所有子元素居中。

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

【讨论】：

【解决方案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>

【讨论】：