SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Member
    Join Date
    Dec 2011
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    centering fluid image within fluid div

    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.

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,323
    Mentioned
    462 Post(s)
    Tagged
    8 Thread(s)
    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:

    Code:
    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.

  3. #3
    SitePoint Zealot
    Join Date
    Oct 2012
    Posts
    139
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Hi Mel99. I use Twitter Bootstrap also. Here are a couple possibilities I see...

    1) For responsive pages I always start a new section like this:
    HTML Code:
    <div class="container-fluid">
       <div class="row-fluid">
    Your example is missing the container-fluid class. That may not be affecting your well, but it sure is easy to test

    2) 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...
    HTML Code:
    <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.

    3) Or you could try just forcing everything into position like this (not sure if it will work because I have never used their "wells")
    HTML Code:
    <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


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •