twitter-bootstrap Twitter Bootstrap Fluid 行水平对齐

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/13973589/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 15:57:45  来源:igfitidea点击:

Twitter Bootstrap Fluid row horizontal alignment

csshtmltwitter-bootstrap

提问by Boas Enkler

I've a fluid row in which i have a item (nontext) and I want to align it horizontal centered

我有一个流畅的行,其中有一个项目(非文本),我想将它水平居中对齐

text

文本

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

this works pretty fine

这很好用

but as soon as I add a max-widthand max-heightthe alignment doesn't work anymore.

但是一旦我添加了最大宽度最大高度,对齐就不再起作用了。

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

What am I doing wrong ? How can I set max width and hight and have a centered alignment?

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

采纳答案by lante

To follow bootstrap rules, try to center it with the offsetclass

要遵循引导程序规则,请尝试将其与offset类居中

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

see documentation

查看文档

回答by MikeTedeschi

Applying max-heightand max-widthon one of Bootstrap's span#classes will override grid styling. I would recommend adding the height/width on the image (if the text align doesn't work, you can try margin: 0 autoon the image.

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