Question

I have a simple request which CSS appears unable to deliver…

I’d like 3 DIVs side-by-side – the first and third DIVs contain a single image – the second DIV contains a line of text, an image, another line of text.

They should appear this

IMAGE1  TEXT1  IMAGE2
        IMAGE2
        TEXT2

With – and this is the bit I cannot make work – TEXT1, IMAGE2 and TEXT2 centered within the width of the 2nd DIV – something like this

   MY TEXT
MY WIDER IMAGE
     TEXT

The CENTER tag would have done this in seconds, but CSS cannot apparently do something as simple as that!?!?

p.s. in reply to a request for code – something like this for starters

<DIV>
  <IMG src=image1.jpg>
</DIV>
<DIV>
  <p>text 1</p>
  <IMG src=image2.jpg>
  <p>text 2</p>
</DIV>
<DIV>
  <IMG src=image3.jpg>
</DIV>

The basic CSS would be

.DIV {
  display: inline;
  float: left;
}

All I need is the magic to make that centre DIV align it’s contents centrally in the way the CENTER tag would have achieved in milliseconds…

and I’ve tried a variety of things including inline-block, margin: auto etc. –

Answer 1

Try something like this.

1. float your divs
2. use text-align:center for the text
3. wrap your images and give them margin:1em auto

HTML

<DIV>
    <p><IMG src=image1.jpg></p>
</DIV>
<DIV>
    <p>text 1</p>
    <p><IMG src=image2.jpg></p>
    <p>text 2</p>
</DIV>
<DIV>
    <p><IMG src=image3.jpg></p>
</DIV>

CSS

div{
    float:left;
    border:1px solid black;
    width:150px;
    height:200px;
}

div p{
    text-align:center;
}

div p img{
    width:20px;
    margin:1em auto;
}

Example: http://jsfiddle.net/PvgSr/