CODEWITHSUNDEEP
csstwitter-bootstrap
nilji
nilji

Reputation: 13

How to center three span3

I'm using Twitter Bootstrap and I'm trying to create a grid with centered rows of three span3 divs.

I have tried to achieve this by wrapping the three span3s in a centered span9, but that doesn't seem to work.

My problem is that the divs don't center correctly and as I'm new to HTML and CSS I would really need some help. Thanks!

HTML

<div class="row">
   <div class="span9 center">
       <div class="span3">
          <p>THUMBNAIL1</p>
       </div> 
       <div class="span3">
          <p>THUMBNAIL2</p>
       </div>     
       <div class="span3">
          <p>THUMBNAIL3</p>
       </div> 
    </div>
</div>

etc.

CSS:

.center {
     float: none;
     margin-left: auto;
     margin-right: auto;
     align: center;
}

Upvotes: 1

Views: 1093

Answers (1)

Hive7
Hive7

Reputation: 3675

Instead of using:

align: center;

Use:

text-align: center;

align is not a css rule though I guess that you got it from the syntax of align as an attribute on the tag

You could also put them inside and element with position relative and then inside have them with: 

position: absolute;
left: 50%;
transform: (0, 50%);

You can also use this:

.span3 {
    display: inline-block;
    clear: both;
}
.span9 {
    text-align: center;
}

Fiddle Demo

Upvotes: 2

Related Questions