CODEWITHSUNDEEP
htmlcsshtml-tablecenterdisplay
user6751084
user6751084

Reputation:

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.

Upvotes: 1

Views: 197

Answers (1)

morre
morre

Reputation: 151

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.

Upvotes: 1

Related Questions