Question

我正在尝试构建一个配置文件卡视图并使用它来启动它。

我使用col-lg-3类构建了两个div元素，另一个使用col-lg-9构建了div元素。问题是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>

我uploadet所以你可以看到整个网站。为了更好地理解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文件中添加cards-container的css。

Answer 2

使用bootstrap时，只需将文本中心类添加到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>

获取内容对齐中心

3 个答案: