CODEWITHSUNDEEP
csstwitter-bootstrapthumbnailsalignment
Tom
Tom

Reputation: 336

Horizontally align thumbnails in center

Following is the code I'm using in my html with twitter-bootstrap. I am trying to center align the output but the image is left-aligned no matter what I do.

<ul class="thumbnails"> 
   <li class="span5">
    <a href="#" class="thumbnail"><img src="img.jpg" /></a>
   </li>
</ul>

Any simple solution?

Upvotes: 5

Views: 36724

Answers (5)

jfindley
jfindley

Reputation: 712

This is simple just add:

<div class="thumbnail" style="margin:0px auto;">whatever image tag here ...</div>

Hope this was helpful

Upvotes: 1

Eric
Eric

Reputation: 41

Create a new row for the image. Use the appropriate offset depending on the size of your image e.g.:

<div class="span8 offset2" >

Upvotes: 0

jstreebin
jstreebin

Reputation: 441

I found this works easiest for Bootstrap:

.thumbnails > li {
  float: right;
  margin-bottom: 18px;
  margin-left: 20px;
}

I simply changed "float" from "left" to "right"

Upvotes: 0

Andres I Perez
Andres I Perez

Reputation: 75389

Twitter bootstrap thumbnails are floated to the left by default, you have to overwrite that behavior on your own stylesheet in order to make them center align its container with the text-align:center and display:inline-block properties. Try this:

CSS

.thumbnails {
    text-align:center;
}

.thumbnails > li {
    display: inline-block;
    *display:inline; /* ie7 fix */
    float: none; /* this is the part that makes it work */
}

This way the thumbail images will center inside the .thumbnails container. Replace the .thumbnail class with the container you want to center your images in.

Upvotes: 18

markvandencorput
markvandencorput

Reputation: 931

If you use text-align: center; and give your img display: inline-block; it should become center aligned.

See: http://jsfiddle.net/HWMZg/

Upvotes: 5

Related Questions