Question

我有一行

<div class="row">

</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>

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个图像它应该显示在一个完整的行，如果它有更多显示在下一行中间

怎么做？

修改我的问题是，如果只有一个.col-md-2显示在页面的中心，如果有多个.col-md-2然后在中间显示，如果有六个则覆盖所有页面< / p>

Answer 1

尝试使用这样的..你可以将其父元素中的任何元素居中。

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

.container {
  width: 940px;  
}

Answer 2

使用css进行居中对齐

text-align:center;

Answer 3

使用

.text-center

它是一个引导类。看看bootply

<强>更新

Answer 4

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

  def easy_translate(original, from:, to:)
    interpolations_in_original = original.scan(INTERPOLATION)
    spaces_before = original.scan(/\A */).first
    spaces_after = original.scan(/ *\z/).first
    translated_text = EasyTranslate.translate(original, from: from, to: to).strip
    translated_text = translated_text.gsub("% {", "%{")
    bad_interpolations = translated_text.scan(INTERPOLATION)
    interpolations_in_original.size.times do |index|
      translated_text.gsub!(bad_interpolations[index], interpolations_in_original[index])
    end
    "#{spaces_before}#{translated_text}#{spaces_after}"
  rescue *NETWORK_ERRORS, EasyTranslate::EasyTranslateException
    nil
  end

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

所以最终代码是

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

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

行容器从中心开始

4 个答案: