I got some DIVs containing IMG and text information. I need to center them and break into new line if needed.
So I need: < center>< div1/> < div2/> < div3/>< /center>
act like < center>text1 text2 text3< /center>
Since I need to center those items I can't use 'float:left'.


I know it's a common problem, but I don't know the 'magic keyword' for this issue on google :) I also know that 'display:inline-block; vertical-align:top' would resolve my problem, but this works fine in Firefox, but not in Internet Exploder.

Maybe I was not clear enough: working sample in FF, but not in IE


I've found something I was looking for: center group of divs, but I can't close this thread.

2 answers

Jordan 469
0
points

The best way to set this up is to go about it as follows: Use three separate divs, each with a align set to center and the image inside each div. So something like:

   <div align="center"><img src="&nbsp;"></div>
   <div align="center"><img src="&nbsp;"></div>
   <div align="center"><img src="&nbsp;"></div>

If you want them to be placed side by side you should use a table and place the divs in each column so something like:

<table width="100%" border="0">
  <tr>
    <td><div align="center"><img src="&nbsp;"></div></td>
    <td><div align="center"><img src="&nbsp;"></div></td>
    <td><div align="center"><img src="&nbsp;"></div></td>
  </tr>
</table>

Alternatively, should you choose not to use a table you can set it up like the above only insert a hard break
tag between them so they end up on different lines...Like this.

  <div align="center"><img src="&nbsp;"></div><br>
   <div align="center"><img src="&nbsp;"></div><br>
   <div align="center"><img src="&nbsp;"></div><br>
Answered about 9 years ago by Jordan
  • Please look at image I attached. Table design won't make automatic line break when needed. Thinker about 9 years ago
0
points

If that dosent work try:

      <table width="100%" border="0">
      <tr>
        <td align="center">
<div><img src=" "></div>
    <div><img src=" "></div>
    <div><img src=" "></div>
    </td>
      </tr>
    </table>
Answered about 9 years ago by richard bruce
  • Please look at image I attached. I dont need centered div under other centered div, I need to center them as text - with automatic line breaks. Thinker about 9 years ago
  • in that case you need to create a container div inside the table and put the 3 divs inside the container, apply float lefts to all divs apart from the container and it will naturally break into a new line when needed. richard bruce about 9 years ago