如何將標題放在表格行的中心？

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

我如何在同一高度的按鈕標題文本？所以它不在按鈕上方？

來源

2016-11-24 Jelle Botman

位置？ –

.overzicht h2 {display：inline; }或內聯塊... – sinisake

@AzeezKallayi是的！ –

是否這樣？

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

來源

2016-11-24 12:42:14

你也可以在'h2'上加'margin-bottom：0; line-height：39px'，這樣'h2'也會垂直與'button'對齊 –

@Patrick幾乎，低一點pleasse –

@ JelleBotman再次檢查答案。修正了高度。 –

請試試這個代碼

HTML

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

CSS

table.overzicht{ 
     max-width: 600px; 
     min-width: 600px; 
     border-collapse: collapse; 
    } 
    .overzicht td{ 
     padding: 10px; 
     text-align: center; 
     vertical-align:center; 
     border:0px;  
    } 
    .overzicht td h2{ 
     margin: 0; 
    }

來源

2016-11-24 13:02:58

嘗試使用代碼段，所以我可以直接看到結果 –

請參閱此鏈接 –

https://jsfiddle.net/sonymathew/592Lqvuq/ –

根據您最後COMM耳鼻喉科我更新帕特里克回答

我有絕對適用於按鈕

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

你想在同一行的標題和按鈕

來源

2016-11-24 13:17:04 Rahul

如何將標題放在表格行的中心？

回答

相關問題