CSS - Align image inside table with inline css

Question

CSS - Align image inside table with inline css

Navigation

#1 by (1 votes)
#2 by (1 votes)
#3 by (1 votes)

3

I need to align one image to the text of the other cell in the table. The css is inline. Here is 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

asked by anonymous 13.04.2016 / 21:26

3 answers

Module rewrite in .htaccess for sub folders AngularJS take a data from the input that was filled by a JS

score 1 · Answer 1

Remove padding-top:10px; from 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:

score 1 · Answer 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, it seems to work fine.

<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>

score 1 · Answer 3

I resolved with a align="middle" outside the direct css 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>