SitePoint Sponsor

User Tag List

Results 1 to 6 of 6

Hybrid View

  1. #1
    SitePoint Wizard boxhead's Avatar
    Join Date
    Feb 2004
    Location
    UK
    Posts
    1,040
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    align text/picture

    I have a small image with some text next to it. Everything in centered and the text is aligned to the middel of the image. The trouble is that when the text wraps, the next line goes to the bottom of the picture and not underneath the first line.

    HTML Code:
    <div align="center">
    <img src="assets/door_bar.jpg" alt="security bar" width="85" height="58" align="middle" /><strong>To reduce the incidence of repeat victimisation among elderly, vulnerable and disadvantaged people</strong>
    </div>
    how do I sort this without tables? (I could use tables but i'm tring not to!)

    monkey
    monkey - the rest is history

  2. #2
    SitePoint Zealot HardinComp's Avatar
    Join Date
    May 2003
    Location
    Boston, MA
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try aligning the picture as "Left". That's how I do it (in my CSS file) and it always works like a charm, although my text starts at the top of my image. You'll need some <BR>'s if you want to force the text lower on your image.
    J.M. Hardin
    My blog
    Registered Ubuntu User #10980

  3. #3
    SitePoint Wizard boxhead's Avatar
    Join Date
    Feb 2004
    Location
    UK
    Posts
    1,040
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the image and text aren't both centered then!

    monkey
    monkey - the rest is history

  4. #4
    SitePoint Zealot HardinComp's Avatar
    Join Date
    May 2003
    Location
    Boston, MA
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And there's the problem with not using tables. Sometimes you just need the little buggers to get a certain look. So long as you're not misusing them they can be quite handy.
    J.M. Hardin
    My blog
    Registered Ubuntu User #10980

  5. #5
    SitePoint Zealot pacman2504's Avatar
    Join Date
    Oct 2003
    Location
    North Wales
    Posts
    154
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If the images will be the same width, could you do something like this:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    
    <html>
    <head>
    <title>Untitled</title>
    <style type="text/css">
    <!--
    body {
      text-align: center;
    }
    .outer
    {
    width : 300px;
    border: 1px solid #ccc;
    margin: auto;
    }
    .outer img {
      float: left;
    	border: 0;
      margin : 15px 0px 15px 0;
      padding : 2px;
    }
    .text
    {
    margin : 30px 0px 30px 90px;
    padding : 2px;
    text-align: left;
    }
    -->
    </style>
    
    </head>
    <body>
    <div class="outer">
    <img src="assets/door_bar.jpg" alt="security bar" width="85" height="58" align="middle" />
    <div class="text">
    <strong>One line of centred text</strong>
    </div>
    </div>
    <div class="outer">
    <img src="assets/door_bar.jpg" alt="security bar" width="85" height="58" align="middle" />
    <div class="text">
    <strong>To reduce the incidence of repeat victimisation among elderly, vulnerable and disadvantaged people</strong>
    </div>
    </div>
    </body>
    </html>
    In the land of the witless, the half-wit is king.
    Business and liability insurance quotes

  6. #6
    Pointiest Petitions carrotflowers's Avatar
    Join Date
    Jul 2003
    Location
    Suburbs of DC (MD)
    Posts
    595
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You should just add a <br /> tag after the <img> tag, before the text, in your case, right before the <strong> tag, and both the image and text will be centered. Or you could forego the <br /> and wrap the text in<p>.


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
  •