CODEWITHSUNDEEP
csshtmltwitter-bootstrap
Boas Enkler
Boas Enkler

Reputation: 12557

Twitter Bootstrap Fluid row horizontal alignment

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-width and max-height the 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?

Upvotes: 4

Views: 11625

Answers (2)

lante
lante

Reputation: 7346

To follow bootstrap rules, try to center it with the offset class

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

see documentation

Upvotes: 2

MikeTedeschi
MikeTedeschi

Reputation: 583

Applying max-height and max-width on 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 auto on the image.

Upvotes: 0

Related Questions