I hope I’m posting in the correct category, I’m using Twitter Bootstrap and I’m trying to center a fluid image within a fluid div. Underneath the image is some text which I want aligned left so using text-align center to the parent div does not work. This is the HTML:
<div class=“row-fluid”>
<div class=“span4 well”>
<img src=“img.png” />
<h2><a href=“#”>Some text</a></h2>
<p class=“well-text”>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, </p>
</div>
</div>
The class “well” gives the span4 a nice soft grey background, but the image is aligned to the right of the well. Anyone familiar with Bootstrap that can see what I’m missing? I bet there’s an easy fix for this.
If you are able to wrap the image in a <p> or <div> you can set the <p> or <div> to text-align: center. That’s my preferred way, as I don’t like / trust inline elements butting up agains block elements.
Another option would simply be to add this to your CSS:
img {display: block;margin:0 auto;}
That way, you don’t have to touch the HTML. If you don’t want this to apply to all images, you’ll need to make it more specific, though.
Your example is missing the container-fluid class. That may not be affecting your well, but it sure is easy to test
It sounds like you want an image with a caption, all in a shaded box with round corners. You may need to use something besides a “well” to do that…
This would give you a captioned image…
<figure>
<img src="../images/some.jpg" />
<figcaption>Words for below the picture</figcaption>
</figure>
…and I assume you know how to create the bordered box with a light background to put it into.
Or you could try just forcing everything into position like this (not sure if it will work because I have never used their “wells”)
<div class="row-fluid">
<div class="span4 well" style="text-align:center;" >
<img src="img.png" />
<div class="well-text clearfix" style="text-align:left;" >
<h2><a href="#">Some text</a></h2>
<p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, </p>
</div>
</div>
</div>
Note that I moved the “well-text” class to include both the <h2> and the <p>. Also the “clearfix” may not be needed. Experiment and let us know the result.
Maybe none of these work as-is, but they are food for thought