Question

我有这段代码：

<div  class="col-sm-4">
    <h4>{{$TagName->TagName}}</h4>
    <img style="
    width:  200px;
    height: 200px;
    ";
    class="img-responsive"; src="images/{{$TagName->TagName}}.jpg"> 
</div>

所以我的想法是（像这样）：

***text***
*imageeee*

代替：

text******
imageeee**

*意味着占据的空间，我不知道如何更好地代表我所寻求的解决方案。我使用了text-align：center到div，并且2显示：阻止了html元素，但它也没有工作。（如果重要的话，我也使用bootstrap）

一些想法如何解决这个问题？

Answer 1

这里有两种方法可以使Bootstrap 3中的列居中：

方法1（抵消）：

第一种方法使用Bootstrap自己的偏移类，因此不需要更改标记，也不需要额外的CSS。关键是设置一个偏移量等于行剩余大小的一半。因此，例如，大小为2的列将通过添加5的偏移量来居中，即(12-2)/2。

在标记中，这看起来像：

<div class="row">
    <div class="col-md-2 col-md-offset-5"></div>
</div>

现在，这种方法有一个明显的缺点，它只适用于偶数列大小，所以只有.col-X-2，.col-X-4，col-X-6，col-X-8并支持col-X-10。

方法2（旧边距：自动）

您可以使用经过验证的margin: 0 auto;技术使任何列大小居中，您只需要处理Bootstrap网格系统添加的浮动。我建议定义一个自定义CSS类，如下所示：

.col-centered{
    float: none;
    margin: 0 auto;
}

现在，您可以将其添加到任何屏幕大小的任何列大小，并且它将与Bootstrap的响应式布局无缝协作：

<div class="row">
    <div class="col-lg-1 col-centered"></div>
</div>

注意：使用这两种技术，您可以跳过.row元素并使列在.container中居中，但由于容器中的填充，您会注意到实际列大小的最小差异类。

从v3.0.1开始，Bootstrap有一个名为center-block的内置类，它使用margin：0 auto但缺少float：none。您可以将其添加到CSS中，以使其与网格系统一起使用。

Answer 2

html

<div  class="col-sm-4 text-center">
    <h4>this is text</h4>
    <img style="
    width:  200px;
    height: 200px;
    ";
    class="img-responsive imageCentered"; src="https://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png"> 
</div>

css

.imageCentered{
  margin:0 auto;
}

这里是jsfiddle

对齐2个html元素，使它们居中，彼此重叠

2 个答案: