Jelle Botman Jelle Botman - 12 days ago 8
CSS Question

How to place the header at the center of the table row?



.overzicht td{
padding: 10px;
text-align: center;
max-width: 600px;
min-width: 600px;
}

<table class='overzicht' border='1'>
<tr style='background-color: yellow;'>
<td colspan='9'>
<h2 style='margin-top: auto; '> Meest recente storing </h2>
<form method='POST' action='nieuwestoring.php' style='float: right; margin-bottom: 0px;'>
<input type='submit' style='padding: 10px;' name='nieuw' value='Nieuwe Storing'>
</form>
</td>
</tr>
</table>





How do i place the header text at the same height as the button?
So its not above the button?

Answer

Like this?

.overzicht td{
    padding: 10px;
    text-align: center;
    max-width: 600px;
    min-width: 600px;
}

.overzicht h2 { 
    display:inline; 
    line-height: 39px;
 } 
<table class='overzicht' border='1'>
    <tr style='background-color: yellow;'>
        <td colspan='9'>
            <h2 style='margin-top: auto; '> Meest recente storing </h2>
            <form method='POST' action='nieuwestoring.php' style='float: right; margin-bottom: 0px;'>
                <input type='submit' style='padding: 10px;' name='nieuw' value='Nieuwe Storing'>
            </form>
        </td>
    </tr>
</table>