Geek Answers Handbook

Center align sketches horizontally

Below is the code I use in my html with twitter-bootstrap. I am trying to center the alignment of 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?

+5
source share
5 answers

Twitter mini-download icons load on the left by default, you must overwrite this behavior on your own stylesheet to make them center its container using the text-align:centerand properties display:inline-block. Try the following:

CSS

.thumbnails {
    text-align:center;
}

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

, .thumbnails. .thumbnail , .

+17

text-align: center; img display: inline-block;, .

: http://jsfiddle.net/HWMZg/

+4

It just add:

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

Hope this was helpful

+1
source

I found this to work the easiest for Bootstrap:

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

I just changed the "float" from "left" to "right"

0
source

Create a new line for the image. Use the appropriate offset depending on the size of your image, for example:

<div class="span8 offset2" >
0
source

More articles:


All Articles