Text vertikal in einem Tabellenkopf zentrieren

Question

Ich bin neu in CSS und HTML und versuche, Text in einem Tabellenkopf vertikal zu zentrieren. Im Moment ist der Text am oberen Rand der Tabellenzelle ausgerichtet. Ich war mit vertical-align: middle; nicht erfolgreich, und die einzige Lösung scheint zu sein, padding-top hinzuzufügen, um den Raum unterhalb des Textes zusammenzubringen. Dies ist jedoch nicht die beste Lösung, weil ich möchte, dass der Text genau in die Tabellenzelle passt. Irgendwelche Ideen werden geschätzt.

body { 
 
    font-size: 18px; 
 
    font-family: 'Open Sans', sans-serif; 
 
    text-align: center; 
 
    color: black; 
 
    background-size: 100%; 
 
    padding:0; 
 
} 
 

 
.mytable { 
 
    border: solid 1px #DDEEEE; 
 
    border-collapse: collapse; 
 
    border-spacing: 0; 
 
    width: 80%; 
 
} 
 

 
.mytable thead th { 
 
    background-color: #DDEFEF; 
 
    border: solid 1px #DDEEEE; 
 
    color: #336B6B; 
 
    /*padding: 30px;*/ 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 

 
.mytable tbody td { 
 
    border: solid 1px #DDEEEE; 
 
    color: #333; 
 
    padding: 30px; 
 
}

<div id="myWebPage" style="display:block"> 
 
    <br><br><br><br> 
 
    <h3>Page title here</h3><br><br><br> 
 

 
    <table class="mytable" align="center"> 
 
    <thead> 
 
     <tr> 
 
     <th><u>Resource</u><br><br><br></th> 
 
     <th><u>Contact</u><br><br><br></th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <th align="left">Resource 1<br><br></th> 
 
     <th align="left" width=35%;>999-999-9999<br> <br></th> 
 
     </tr> 
 
     <tr> 
 
     <th align="left">Resource 2<br><br></th> 
 
     <th align="left">888-888-8888<br><br></th> 
 
     </tr> 
 
     <tr> 
 
     <th align="left">Resource 3<br><br></th> 
 
     <th align="left" width=35%;>777-777-7777<br> <br></th> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

Answer 1

Sie haben es direkt in Ihrem CSS getan, entfernen Sie einfach Ihre <br> Tags. Z.B.

<th><u>Resource</u></th> 

Die vertikale Ausrichtung funktioniert nicht, wenn Sie Linien manuell unter Ihre Überschriften einfügen.

Voll Beispiel

body { 
 
    font-size: 18px; 
 
    font-family: 'Open Sans', sans-serif; 
 
    text-align: center; 
 
    color: black; 
 
    background-size: 100%; 
 
    padding:0; 
 
} 
 

 
.mytable { 
 
    border: solid 1px #DDEEEE; 
 
    border-collapse: collapse; 
 
    border-spacing: 0; 
 
    width: 80%; 
 
} 
 

 
.mytable thead th { 
 
    background-color: #DDEFEF; 
 
    border: solid 1px #DDEEEE; 
 
    color: #336B6B; 
 
    /*padding: 30px;*/ 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 

 
.mytable tbody td { 
 
    border: solid 1px #DDEEEE; 
 
    color: #333; 
 
    padding: 30px; 
 
}

<div id="myWebPage" style="display:block"> 
 
    <br><br><br><br> 
 
    <h3>Page title here</h3><br><br><br> 
 

 
    <table class="mytable" align="center"> 
 
    <thead> 
 
     <tr> 
 
     <th><u>Resource</u></th> 
 
     <th><u>Contact</u></th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td align="left">Resource 1<br><br></td> 
 
     <td align="left" width=35%;>999-999-9999<br> <br></td> 
 
     </tr> 
 
     <tr> 
 
     <td align="left">Resource 2<br><br></td> 
 
     <td align="left">888-888-8888<br><br></td> 
 
     </tr> 
 
     <tr> 
 
     <td align="left">Resource 3<br><br></td> 
 
     <td align="left" width=35%;>777-777-7777<br> <br></td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

Answer 2

wie diese versuchen, warum Sie <br> und <td> zu <th>

Tabelle gesetzt werden <td> Die Elemente der Datencontainer der Tabelle sind. HTML
Tag ist Ein Zeilenumbruch wird nach oben wie folgt gekennzeichnet:

This text contains<br>a line break. 

body { 
 
    font-size: 18px; 
 
    font-family: 'Open Sans', sans-serif; 
 
    text-align: center; 
 
    color: black; 
 
    background-size: 100%; 
 
    padding:0; 
 
} 
 

 
.mytable { 
 
    border: solid 1px #DDEEEE; 
 
    border-collapse: collapse; 
 
    border-spacing: 0; 
 
    width: 80%; 
 
} 
 

 
.mytable thead th { 
 
    background-color: #DDEFEF; 
 
    border: solid 1px #DDEEEE; 
 
    color: #336B6B; 
 
    /*padding: 30px;*/ 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 

 
.mytable tbody td { 
 
    border: solid 1px #DDEEEE; 
 
    color: #333; 
 
    padding: 30px; 
 
}

<h3>Page title here</h3> 
 

 
    <table class="mytable" align="center"> 
 
    <thead> 
 
     <tr> 
 
     <th><u>Resource</u></th> 
 
     <th><u>Contact</u></th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td align="left">Resource 1</td> 
 
     <td align="left" width=35%;>999-999-9999</td> 
 
     </tr> 
 
     <tr> 
 
     <td align="left">Resource 2</td> 
 
     <td align="left">888-888-8888</td> 
 
     </tr> 
 
     <tr> 
 
     <td align="left">Resource 3</td> 
 
     <td align="left" width=35%;>777-777-7777</td> 
 
     </tr> 
 
    </tbody> 
 
    </table>

erfahren Sie mehr über HTML-Tabellehttps://www.w3schools.com/html/html_tables.asp

Answer 3

einedefinierenWert für die th Elemente

definieren eine explizite (absolut) Höhe für Ihre Tabellenkopf-Zellen (th) mit Längeneinheit Werte (z: 65px), dann erklären die vertical-align Regel auf diese Elemente.

Code Snippet Demonstration:

body { 
 
    font-size: 18px; 
 
    font-family: 'Open Sans', sans-serif; 
 
    text-align: center; 
 
    color: black; 
 
    background-size: 100%; 
 
    padding: 0; 
 
} 
 

 
.mytable { 
 
    border: solid 1px #DDEEEE; 
 
    border-collapse: collapse; 
 
    border-spacing: 0; 
 
    width: 80%; 
 
} 
 

 
.mytable thead th { 
 
    background-color: #DDEFEF; 
 
    border: solid 1px #DDEEEE; 
 
    color: #336B6B; 
 
    /*padding: 30px;*/ 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    /* additional */ 
 
    height: 65px; 
 
} 
 

 
.mytable tbody td { 
 
    border: solid 1px #DDEEEE; 
 
    color: #333; 
 
    padding: 30px; 
 
}

<div id="myWebPage" style="display:block"> 
 
    <br><br><br><br> 
 
    <h3>Page title here</h3><br><br><br> 
 

 
    <table class="mytable" align="center"> 
 
    <thead> 
 
     <tr> 
 
     <th><u>Resource</u></th> 
 
     <th><u>Contact</u></th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <th align="left">Resource 1<br><br></th> 
 
     <th align="left" width=35%;>999-999-9999<br> <br></th> 
 
     </tr> 
 
     <tr> 
 
     <th align="left">Resource 2<br><br></th> 
 
     <th align="left">888-888-8888<br><br></th> 
 
     </tr> 
 
     <tr> 
 
     <th align="left">Resource 3<br><br></th> 
 
     <th align="left" width=35%;>777-777-7777<br> <br></th> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>

Answer 4

nicht <br> Tags für das Layout verwenden Sie - das ist ein No-Go! Es wird versauen, was auch immer Sie bezüglich der vertikalen Ausrichtung und der oberen/unteren Auffüllung und Ränder, wie in dem Code in Ihrer Frage versuchen.

Löschen Sie alle und verwenden Sie stattdessen die obere und untere Polsterung.

Wenn noch benötigt, verwenden Sie vertical-align, aber in den meisten Fällen werden Sie es nicht benötigen.Und verwenden Sie das td-Tag für Zellen in der tbody, nicht th.

body { 
 
    font-size: 18px; 
 
    font-family: 'Open Sans', sans-serif; 
 
    text-align: center; 
 
    color: black; 
 
    background-size: 100%; 
 
    padding:0; 
 
} 
 
#myWebPage > h3 { 
 
    padding: 40px 0; 
 
} 
 

 
.mytable { 
 
    border: solid 1px #DDEEEE; 
 
    border-collapse: collapse; 
 
    border-spacing: 0; 
 
    width: 80%; 
 
} 
 

 
.mytable thead th { 
 
    background-color: #DDEFEF; 
 
    border: solid 1px #DDEEEE; 
 
    color: #336B6B; 
 
    padding: 30px 0; 
 
    /*padding: 30px;*/ 
 
    text-align: center; 
 
    vertical-align: middle; 
 
} 
 

 
.mytable tbody td { 
 
    border: solid 1px #DDEEEE; 
 
    color: #333; 
 
    padding: 30px; 
 
}

<div id="myWebPage"> 
 
    <h3>Page title here</h3> 
 
    <table class="mytable" align="center"> 
 
    <thead> 
 
     <tr> 
 
     <th><u>Resource</u></th> 
 
     <th><u>Contact</u></th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
     <td align="left">Resource 1</td> 
 
     <td align="left" width=35%;>999-999-9999</td> 
 
     </tr> 
 
     <tr> 
 
     <td align="left">Resource 2</td> 
 
     <td align="left">888-888-8888</td> 
 
     </tr> 
 
     <tr> 
 
     <td align="left">Resource 3</td> 
 
     <td align="left" width=35%;>777-777-7777</td> 
 
     </tr> 
 
    </tbody> 
 
    </table> 
 
</div>