Question

我有一张使用bootstrap网格系统的5张图片表。目前它正在以这种方式展示。（假设X是图像）。

x x

X

我希望最后一个x位于中心。

这是我显示图像的方式。我有一个jsbin http://output.jsbin.com/rojipeqazu显示我的结果。复制我的部分代码，基本上我重复了3次。

知道该怎么做吗？

// In SecondViewController
override func viewDidAppear(animated: Bool) {
    super.viewDidAppear(animated)

    self.dataDelegate?.didReceiveData("data")
}

Answer 1

最后一行

<div class="col-sm-8" style="text-align: center">。繁荣完成了。 MAGICAL

＆＃34;这是什么＆＃34;你问？我将列宽加倍并将内容对齐到中心。

PS：我建议将style="text-align: center"添加到所有col-sm-#，以便它看起来不错......只是设计师提示

Answer 2

这应该以你为中心。

<span class="col-md-12">
<span class="col-md-6">//image here
</span>
<span class="col-md-6">//image here
</span>
<span class="col-md-6">//image here
</span>
<span class="col-md-6">//image here
</span>
<span class="col-md-offset-3 col-md-6 
col-md-offset-3">//image here
</span>
</span>

那应该适合你。

Answer 3

如果我理解你的问题，这对我来说是更好的方式。

＆＃13;

<table style="text-align:center;">
<tr>
<td><a href="#"><img src="http://inmufest.com/images/pepsi_147x200.jpg" alt=""/></a><br><a href="#"><h3 class="main-title layer">Pepsi</h3></a></td>
<td><a href="#"><img src="http://inmufest.com/images/pepsi_147x200.jpg" alt=""/></a><br><a href="#"><h3 class="main-title layer">Pepsi</h3></a></td>
</tr>
<tr>
<td><a href="#"><img src="http://inmufest.com/images/pepsi_147x200.jpg" alt=""/></a><br><a href="#"><h3 class="main-title layer">Pepsi</h3></a></td>
<td><a href="#"><img src="http://inmufest.com/images/pepsi_147x200.jpg" alt=""/></a><br><a href="#"><h3 class="main-title layer">Pepsi</h3></a></td>
</tr>

<tr>
<td colspan="2"><a href="#"><img src="http://inmufest.com/images/pepsi_147x200.jpg" alt=""/></a><br><a href="#"><h3 class="main-title layer">Pepsi</h3></a></td>
</tr>
</table>

＆＃13;

在bootstrap中居一行

3 个答案: