div innerhalb von td - vertikal ausgerichtet: Mitte. funktioniert nicht

Question

Ich weiß, dass diese Frage viele Antworten hat, aber ich konnte keine gute Antwort finden, die mein Problem beheben.

Also, ich habe ein div in einem td. und alles, was ich will, ist das div wird in die mitte des td gesetzt, ja das ist einfach!

Für die Bequemlichkeit Ich füge dieses Bild:

.tdClass{ 
 
    vertical-align:middle; 
 
} 
 
    
 
.divClass{ 
 
    display:inline; 
 
    vertical-align:middle; 
 
}

<table border=1> 
 
    <tr> 
 
     <td> 
 
     first field: 
 
     </td> 
 
     <td> 
 
     <textarea rows="4" cols="50"></textarea> 
 
     <div class="divClass"> 
 
     VERTICAL CENTER??? 
 
     </div> 
 
     </td> 
 
    </tr> 
 
    </table>

Answer 1

table{ 
 
    width: 100%; 
 
} 
 
.tdClass{ 
 
    vertical-align:middle; 
 
} 
 

 
.divClass{ 
 
    display:inline; 
 
    vertical-align:middle; 
 
} 
 
textarea{ 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
}

<table border=1> 
 
<tr> 
 
    <td> 
 
    first field: 
 
    </td> 
 
    <td> 
 
    <textarea rows="4"></textarea> 
 
    <div class="divClass"> 
 
    VERTICAL CENTER??? 
 
    </div> 
 
    </td> 
 
</tr> 
 
</table>

Answer 2

Zu allererst table-Tag ist vertikale Mitte standardmäßig. Zweitens haben Sie .tdClass geschrieben und nie irgendwo benutzt.

https://jsfiddle.net/wazmgz3g/1/

<table border=1> 
<tr> 
    <td> 
    first field: 
    </td> 
    <td> 
    <textarea rows="4" cols="50"></textarea><br> 
    <div class="divClass" width='100%'> 
    <center>VERTICAL CENTER???</center> 
    </div> 
    </td> 
</tr> 
</table> 

Bitte besuchen Sie diese Geige JS und prüfen, ob das ist, was Sie erwarten. Wenn ja, kopiere es.

Vielen Dank.

Answer 3

Verwenden Sie display: flex zu dem größeren Tabelle-Datenfeld.

Hier ist der aktualisierte Code.

HTML und CSS

.tdClass{ 
 
    vertical-align:middle; 
 
} 
 

 
.divClass{ 
 
    display:inline; 
 
    vertical-align:middle; 
 
} 
 
.text-section{ 
 
    display: flex; 
 
    align-items: center; 
 
} 
 
.divClass{ 
 
    font-size: 12px; 
 
}

<table border=1> 
 
<tr> 
 
    <td> 
 
    first field: 
 
    </td> 
 
    <td class="text-section"> 
 
    <textarea rows="4" cols="50"></textarea> 
 
    <div class="divClass"> 
 
    VERTICAL CENTER??? 
 
    </div> 
 
    </td> 
 
</tr> 
 
</table>

Hier ist die aktualisierte Demo