0

I'm relatively new to the twitter bootstrap world and % based widths and am confusing myself greatly with what should be an easy thing to accomplish.

I'm trying to center each of the left floated .subimg on my page. Obviously margin:0 auto won't work because it's not a static grid. I've used text-align centers on parent divs to no avail. My markup is below:

<style>
.subimg{float:left;}
.row-fluid{text-align:center;}
</style>

<div class="row-fluid"><!-- begin row -->
    <div class="span12 subimgstrip">
            <div class="subimg">
                <a href="#">
                    <img src="/wp-content/themes/wordpress-bootstrap/img/products/infection/1.jpg"/>
                    <h6>Customize Settings</h6>
                </a>
            </div>
            <div class="subimg">
                <a href="#">
                        <img src="/wp-content/themes/wordpress-bootstrap/img/products/infection/2.jpg"/>
                        <h6>Set Specific Criteria</h6>
                </a>
            </div>
            <div class="subimg">
                <a href="#">
                        <img src="/wp-content/themes/wordpress-bootstrap/img/products/infection/3.jpg"/>
                        <h6>Customize Alerts</h6>
                </a>
            </div>
            <div class="subimg">
                <a href="#">
                        <img src="/wp-content/themes/wordpress-bootstrap/img/products/infection/4.jpg"/>
                        <h6>Create Antibiograms</h6>
                </a>
            </div>
            <div class="subimg">
                <a href="#">
                        <img src="/wp-content/themes/wordpress-bootstrap/img/products/infection/5.jpg"/>
                        <h6>Isolate Information</h6>
                </a>
            </div>
        </div>
    </div><!-- end row -->
3
  • 1
    you can't center something that is floated unless you know the width or the parent then you can apply the correct margin to make your floated div appear centered
    – Pete
    Feb 25, 2013 at 16:28
  • right, just realized that i'm taking the content out of its set area with the float (duhh moment) display:inline-block seems to fix it for me. Any reason why I shouldn't use that?
    – gschervish
    Feb 25, 2013 at 16:29
  • no reason I can think of
    – Pete
    Feb 25, 2013 at 16:30

1 Answer 1

0

Best way to center floated content with twitter bootstrap is to give the floated items a style of display:inline-block; and give the parent div a style of text-align:center

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.