SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict
    Join Date
    Nov 2000
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Trying to Centre DIV

    Hi,

    I'm trying to format a page that is pulled from tumblr.com and embeded into a HTML page using a js file (provided by tumblr)

    What I'm trying to do is get the content (images & text) central on the page but as the text is in a div that has this class associated to it from the js file ".tumblr_caption"

    here's the code so far (this is a redered page so removed the js file link)
    Code:
    <html><head><title>My Blog</title>
    <style type="text/css">
    <!--
    body {
    	background-color: #99FF66;
    	text-align: center;
    }
    .tumblr_posts {
    	list-style-type: none;
    }
    img {
    	border: 5px double #000066;
    }
    .tumblr_caption {
    	width: 400px;
    	text-align: center;
    }
    
    -->
    </style>
    </head><body>
    <ol class="tumblr_posts">
         <li class="tumblr_post tumblr_photo_post">
    
                    <img src="http://26.media.tumblr.com/tumblr_l1aou2N1H11qbt99to1_400.jpg" alt="A shot my friend took while in Japan, did a lil HDR\Photoshop work on it to give me the final image" class="tumblr_photo">
                    
                    
                        <div class="tumblr_caption">
                            <p>A shot my friend took while in Japan, did a lil HDR\Photoshop work on it to give me the final image</p>
                        </div>
                </li>
                <li class="tumblr_post tumblr_photo_post"><div class="tumblr_caption"></div>
      </li>
             <li class="tumblr_post tumblr_photo_post">
                  <img src="http://28.media.tumblr.com/tumblr_l16x8rbCOG1qbt99to1_400.jpg" alt="Lady Herbert's Garden Coventry" class="tumblr_photo">
                  <div class="tumblr_caption">
                            <p>Lady Herbertís Garden Coventry</p>
                        </div>
                </li>
    
    </ol>
    </http>
    </body></html>
    Can someone show me how I get text div to be 400px wide so it fits under each of the photos that will also be 400px

    hope so...
    thanks

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Since you have a defined width then auto margins will center the div.

    Code:
    .tumblr_caption {
        width: 400px;
        margin:auto;
    }

  3. #3
    SitePoint Addict
    Join Date
    Nov 2000
    Posts
    224
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    simple when you know how! thank you Rayzur


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
  •