How to center an image with fluid layout in Twitter Bootstrap 2.3.2?

Question

I am using bootstrap for my own site and I struggle in centering a single jpg image.

I use the following code

<header class="row-fluid">
<div class="span4 offset4">
<img src="img/yup.jpg" title="Hello" alt="World";>
</div>
<div class="title span12">
<h1>Hello Kitty</h1>
</div>          
</header>

but still the image is not centered... what is wrong here? Many thanks!!

Answer 1

try this

<header>
   <div class="row-fluid">
       <div class="span5 offset2">
          <center><img src="img/yup.jpg" title="Hello" alt="World"></center>
       </div>
   </div>
   <div class="row-fluid"> 
       <div class="title span12">
          <h1>Hello Kitty</h1>
       </div>        
  </div>  
</header>

UPDATE : based on comment

When you use row-fluid, it will create row which can be manageable by 12 parts named as span1,span2...span12. Where offset is applying as margin-left. You can apply it as per your requirement. it is also divided into 12 parts. Here, I have used tag because you want your image in center as by default it is left align.