如何将标题放在表格行的中心?

时间:2016-11-24 12:37:57

标签: html css

这就是我现在拥有的!



.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>
&#13;
&#13;
&#13;

如何将标题文字放在与按钮相同的高度? 所以它不在按钮之上?

3 个答案:

答案 0 :(得分:2)

喜欢这个吗?

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

.overzicht h2 { 
    display:inline; 
    line-height: 39px;
 } 
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

请尝试此代码

HTML

Insert into yourtable1 (column1, column2 ) select column1 ,column2 from yourtable2 where yourcondition

CSS

    <table class='overzicht' border='1'>
    <tr style='background-color: yellow;'>
  <td><h2 style='margin-top: auto; '> Meest recente storing </h2></td>
        <td>
            <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>

答案 2 :(得分:0)

根据您的上次评论我更新了帕特里克的回答

我已将位置绝对应用于按钮

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

position: relative;
}

.overzicht h2 { 
    display:inline; 
    line-height: 39px;
 } 
form{
    position: absolute;
    right: 10px;
    top: 10px;
}
<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='margin-bottom: 0px;'>
                <input type='submit' style='padding: 10px;' name='nieuw' value='Nieuwe Storing'>
            </form>
        </td>
    </tr>
</table>