行容器从中心开始答案

【问题标题】：row container start from center行容器从中心开始
【发布时间】：2021-07-28 22:40:02
【问题描述】：

我有一排

<div class="row">

</div>

我正在这个容器中插入一些动态内容

用下面的sn-p

<div class="col-md-2 " style="padding-bottom:2px;margin-left: 1px;" >
    <a href="/profile"><img src="{{imgurl}}" width="40px" height="40px"></a>
</div>

Ex 代码如下：

 <div class="row">
     <div class="col-md-2 " style="padding-bottom:2px;margin-left: 1px;" >
            <a href="/profile"><img src="{{imgurl}}" width="40px" height="40px"></a>
        </div>
    <div class="col-md-2 " style="padding-bottom:2px;margin-left: 1px;" >
            <a href="/profile"><img src="{{imgurl}}" width="40px" height="40px"></a>
        </div>
    <div class="col-md-2 " style="padding-bottom:2px;margin-left: 1px;" >
            <a href="/profile"><img src="{{imgurl}}" width="40px" height="40px"></a>
        </div>
    <div class="col-md-2 " style="padding-bottom:2px;margin-left: 1px;" >
            <a href="/profile"><img src="{{imgurl}}" width="40px" height="40px"></a>
        </div>
    .......
</div>

这里我希望内容从中心显示，意思是

如果只有一张图片显示在中心，如果它有 2 个图像，则在中心显示这 2 个图像同样，如果我有 6 张图像，它应该显示在一个完整的行中，如果有更多显示在下一行middle

如何做到这一点？

编辑我的问题是如果只有一个 .col-md-2 显示在页面中心，如果有多个 .col-md-2 则显示在中间，如果有六个则覆盖所有页面

【问题讨论】：

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

使用 css 居中对齐

text-align:center;

【讨论】：

【解决方案2】：

尝试像这样使用。你可以在其父元素中居中任何元素。

.center-block() {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.container {
  width: 940px;  
}

【讨论】：

你能创建一个小提琴链接吗？

【解决方案3】：

使用

.text-center

它是一个引导类。看看bootply

更新

【讨论】：

现在就来看看吧。但是，去掉 col-md-2 之间的边距，因为它会使第 6 列向下移动到下一行

【解决方案4】：

G.L.P 解决方案对我有用

.center-block{
  display: block;
  margin-left: auto;
  margin-right: auto;
}

并在 col-md-3 div 中调用这个类，每个 div 你都这样称呼它

所以最终代码是

<div class="row">
 <div class="col-md-2 center-block" style="padding-bottom:2px;margin-left: 1px;" >
        <a href="/profile"><img src="{{imgurl}}" width="40px" height="40px"></a>
    </div>
<div class="col-md-2 center-block" style="padding-bottom:2px;margin-left: 1px;" >
        <a href="/profile"><img src="{{imgurl}}" width="40px" height="40px"></a>
    </div>
<div class="col-md-2 center-block" style="padding-bottom:2px;margin-left: 1px;" >
        <a href="/profile"><img src="{{imgurl}}" width="40px" height="40px"></a>
    </div>
<div class="col-md-2 center-block" style="padding-bottom:2px;margin-left: 1px;" >
        <a href="/profile"><img src="{{imgurl}}" width="40px" height="40px"></a>
    </div>

对不起，我的声誉很低，所以我无法评价或评论你的评论。

【讨论】：