CODEWITHSUNDEEP
javascripthtmlcssvertical-alignment
Pablo
Pablo

Reputation: 33

making a perfect alignment with text out and in a table

I need to perfectly align "text number one" and "text number two". Second text is inside a table. I need it to be that way to make my program work with functions I'll add later. I'm having a bad time with vertical-align coz it gives me different results depending on the browser I use. Am I doing something wrong or is this the kind of things that each browser gives different results.

The alignment is perfect using Microsoft Edge and IE10. It doesn't fully align using Chrome, Mozilla and Opera.

The code is

<!DOCTYPE html>
<html>
<head></head>

<body style="font-size:18pt"><br><br>

    <span>  text number one

        <table style="margin:0; padding:0; border:0; border-spacing:0; vertical-align:text-bottom; display:inline-table">
            <tr>
                <td style="padding:0">
                    text number two
                </td>
            </tr>
        </table>
    </span>
</body>
</html>

Upvotes: 1

Views: 84

Answers (1)

Johannes
Johannes

Reputation: 67748

Try vertical-align:baseline;, but on the td, not on the table (and delete vertical-align:text-bottom; from the table tag).

Here's a codepen: http://codepen.io/anon/pen/yOpzdK

Upvotes: 1

Related Questions