td vertical-align: baseline; : td align « Tags « HTML / CSS






  1. HTML / CSS
  2. Tags
  3. td align

td vertical-align: baseline;

    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en'>
    <head>
        <title>vertical-align</title>
<style type='text/css'>
p {
    font: 12px sans-serif;
}
span.line {
    border: 1px solid rgb(200, 200, 200);
    background: rgb(244, 244, 244);
    font-size: 100px;
}
span.line span {
    vertical-align: 300%;
    font-size: 20px;
    background: white;
    border: 1px solid black;
}
td {
    padding: 5px;
    width: 100px;
    border: 1px solid black;
}
td#baseline-copy {
    vertical-align: baseline;
}
td#baseline {
    font-size: 50px;
    vertical-align: baseline;
}
td#td-top {
    vertical-align: top;
}
td#td-middle {
    vertical-align: middle;
}
td#td-bottom {
    vertical-align: bottom;
}
</style>
    </head>
    <body>

        <table>
            <tbody>
                <tr>
                    <td id='baseline-copy'>
                        This copy aligns with the bottom of the tallest content
                        in the first row of the table.
                    </td>
                    <td id='baseline'>Baseline</td>
                    <td id='td-top'>Top</td>
                    <td id='td-middle'>Middle</td>
                    <td id='td-bottom'>Bottom</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>








Related examples in the same category

1.Table cell background and align, indent
2.Vertically aligned to the top of the cell
3.vertically aligned to the middle of the cell
4.vertically aligned to the bottom of the cell
5.Table cell vertical-align: baseline
6.table cell alignment
7.Table cell with vertical-align: top
8.Table cell with vertical-align: baseline
9.table cells with vertical alignment
10.td vertical-align: top;
11.td vertical-align: middle;
12.td vertical-align: bottom;