Twitter Bootstrap Fluid 行水平对齐答案

【问题标题】：Twitter Bootstrap Fluid row horizontal alignmentTwitter Bootstrap Fluid 行水平对齐
【发布时间】：2012-12-20 22:31:43
【问题描述】：

我有一个流畅的行，其中有一个项目（非文本），我想将其水平居中对齐

文字

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12" style="text-align: center">
            <img src="@Url.Content("~/Images/Domain/IMG_1710.jpg")" />
        </div>
    </div>
</div>

这很好用

但是一旦我添加了 max-width 和 max-height，对齐就不再起作用了。

<div class="container-fluid">
    <div class="row-fluid">
        <div class="span12"  style="text-align: center;max-height: 300px; max-width: 400px" >
            <img src="@Url.Content("~/Images/Domain/IMG_1710.jpg")" />

    </div>
</div>

我做错了什么？如何设置最大宽度和高度并居中对齐？

【问题讨论】：

把css放在图片本身上？
为什么不使用 .offset 类来定位跨度
我必须如何应用偏移类？你有例子吗？
在图像本身上设置样式没有帮助

标签： css html twitter-bootstrap

【解决方案1】：

要遵循引导规则，请尝试以 offset 类为中心

<div class="row-fluid">
    <div class="span4 offset4">
        <img src="yourimage" />
    </div>
</div>

see documentation

【讨论】：

【解决方案2】：

在 Bootstrap 的 span# 类之一上应用 max-height 和 max-width 将覆盖网格样式。我建议在图像上添加高度/宽度（如果文本对齐不起作用，您可以在图像上尝试margin: 0 auto。

【讨论】：