align text/picture

**boxhead** · Oct 14, 2004, 04:15

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

**HardinComp** · Oct 14, 2004, 04:55

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 's if you want to force the text lower on your image.

**boxhead** · Oct 14, 2004, 05:27

the image and text aren't both centered then!

monkey

**HardinComp** · Oct 14, 2004, 05:47

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.

**pacman2504** · Oct 15, 2004, 03:46

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>

**carrotflowers** · Oct 15, 2004, 05:43

You should just add a tag after the <img> tag, before the text, in your case, right before the tag, and both the image and text will be centered. Or you could forego the and wrap the text in.

The SitePoint Forums have moved.

User Tag List

Thread: align text/picture

Thread Tools

Display

align text/picture

Bookmarks

Bookmarks

Posting Permissions