CSS - Align image inside table with inline css

Asked

Viewed 5,944 times

3

I need to align an image to the text of the other cell in the table. css is inline. Follow the code:

<table>
    <tbody>
        <tr>
            <td style="display: inline-block; width: 50px; padding-left: 30px;">
                <img src="[URL DO LOGO]" style="width: 50px;">
            </td>
                <br>
            <td style="padding-left: 5px; display: inline-block; width: 480px;">
                <div style="width: 480px; color: #757575; font-size: 12px; padding-left: 10px; padding-top: 10px; text-align:left;">Lorem ipsum.</div>
            </td>
        </tr>
    </tbody>
</table>
css table vertical-align

  • The display: inline-block in Tds fucks with everything. And you want it to stay aligned as?

  • in the middle of the cell...

  • you can take the display: inline-block

  • Use text-align: center; vertical-align: middle in the TD style. And remove the display: inline-block.

  • didn’t work out!!

3 answers

2

In your code I found a padding-left <td style="display: inline-block; width: 50px; padding-left: 30px;"> in the image column and, if you remove it, apparently it works.

<table>
    <tbody>
        <tr>
            <td style="display: inline-block; width: 50px;">
                <img src="~/Content/Imagem/Politica/avatar1.jpg" style="width: 50px;">
            </td>
            <br>
            <td style="padding-left: 5px; display: inline-block; width: 480px;">
                <div style="width: 480px; color: #757575; font-size: 12px; padding-left: 10px; padding-top: 10px; text-align:left;">Lorem ipsum.</div>
            </td>
        </tr>
    </tbody>
</table>

2

Remove the padding-top:10px; of the second TD and try this;

    <html><head><title></title></head>
    <body>
        <table style="border: solid 1px black">
            <tbody>
                <tr>
                    <td style="width: 50px; padding-left: 30px;">
                        <img src="http://i.forbesimg.com/media/lists/companies/facebook_416x416.jpg" style="width: 50px;">
                    </td>
                    <td style="padding-left: 5px; width: 480px;">
                        <div style="width: 480px; color: #757575; font-size: 12px; padding-left: 10px; text-align:left; vertical-align:middle;">Lorem ipsum.</div>
                    </td>
                </tr>
            </tbody>
        </table>

You can see the result below:

inserir a descrição da imagem aqui

1

I settled with a align="middle" out of css right in html:

<table>
    <tbody>
        <tr>
            <td style="width: 55px; padding-left: 30px;">
                <img src="[LOGO]" style="width: 55px;" align="middle">
            </td>
                <br>
            <td style="padding-left: 10px; padding-top: 10px; width: 480px; text-align:left;">
                <div style="width: 465px; color: #757575; font-size: 12px;">Debitamos R$ [VALOR1] de sua conta no Paypal no dia [DATA] às [HORA]. Seu produto será enviado por [LOJA], e você receberá no seu endereço em até [PRAZO].</div>
            </td>
        </tr>
    </tbody>
</table>

Browser other questions tagged css table vertical-align

You are not signed in. Login or sign up in order to post.