테이블 행의 가운데에 헤더를 배치하는 방법은 무엇입니까?

Question

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

은 어떻게 버튼과 같은 높이에서 헤더 텍스트를 배치합니까? 버튼 위에 있지 않습니까?

Answer 1

이와 비슷한?

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

Answer 2

마지막 통신을 기반으로이 코드

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

Answer 3

을 시도하십시오 나는 패트릭의 대답 업데이트 ENT

I 버튼

이 같은 줄에 제목과 버튼을 만들고 싶어

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