SitePoint Sponsor |
|
User Tag List
Results 1 to 6 of 6
Thread: align text/picture
-
Oct 14, 2004, 04:15 #1
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>
monkeymonkey - the rest is history
-
Oct 14, 2004, 04:55 #2
-
Oct 14, 2004, 05:27 #3
the image and text aren't both centered then!
monkeymonkey - the rest is history
-
Oct 14, 2004, 05:47 #4
-
Oct 15, 2004, 03:46 #5
- 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>
-
Oct 15, 2004, 05:43 #6
- 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