user123 user123 - 3 months ago 9
CSS Question

put images in the center of table and text below image should be in new line if extra text is there

Here is the image

I want image to be centered of table tag and text to be in new line if it gets overflows.

In table tag, how can I put images in center of table and text below images which are side by side.

I want an image and below it , there should be some text. but when text overflows then remaining text should be in new line.

I can only use inline css and can't use other tags like div. Also I can't use position property.As I am making HTML Emailers. Have to stick to table tag.



<table style="margin: 0 auto; border: thin green solid;" width="600">
<tr>
<td style="margin:0; padding: 0;" align="center">
<img src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455949782.jpeg" width="110" height="110" style="display: block; margin: 0 auto;">
<p>Some Text</p>
</td>

<td style="margin:0; padding: 0;" align="center">
<img src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455949782.jpeg" width="110" height="110" style="display: block; margin: 0 auto;">
<p>Some Text</p>
</td>

<td style="margin:0; padding: 0;" align="center">
<img src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455949782.jpeg" width="110" height="110" style="display: block; margin: 0 auto;">
<p>Some Text Some TextSome TextSome TextSome TextSome Text</p>
</td>

<td style="margin:0; padding: 0;" align="center">
<img src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455949782.jpeg" width="110" height="110" style="display: block; margin: 0 auto;">
<p>Some Text</p>
</td>
</tr>
</table>





as displayed in the code snippet, I want extra text to be displayed in the next line and images to be in the center of the table.

Answer

Try this:

<table style="margin: 0 auto; border: thin green solid;" width="600">
<tr>
    <td style="margin:0; padding: 0;" align="center">
        <img src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455949782.jpeg" width="110" height="110" style="display: block; margin: 0 auto;">
    </td>
    <td style="margin:0; padding: 0;" align="center">
        <img src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455949782.jpeg" width="110" height="110" style="display: block; margin: 0 auto;">
    </td>
    <td style="margin:0; padding: 0;" align="center">
        <img src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455949782.jpeg" width="110" height="110" style="display: block; margin: 0 auto;">
    </td>
    <td style="margin:0; padding: 0;" align="center">
        <img src="http://www.hubilo.com/eventApp/ws//images/speaker/profile/thumb/2712_1455949782.jpeg" width="110" height="110" style="display: block; margin: 0 auto;"> 
    </td>
</tr>
<tr>
    <td style="margin:0; padding: 0; width: 110px;" align="center">
        <p>Some Text</p>
    </td>
    <td style="margin:0; padding: 0; width: 110px;" align="center">
        <p>Some Text</p>
    </td>
    <td style="margin:0; padding: 0; width: 110px;" align="center">
        <p>Some Text Some TextSome TextSome TextSome TextSome TextSome Text</p>
    </td>
    <td style="margin:0; padding: 0; width: 110px;" align="center">
        <p>Some Text</p>
    </td>
</tr>

The important thing is that you assign the table cells with the width of the image in the row above.

Comments