Div volle Höhe von TD, mit Text vertikal Mitte

Question

Ich weiß, dass diese Frage wurde mehrmals hier gestellt, fand aber keine richtige Antwort. Ich schaffte einen Workaround, um Div volle Höhe von TD zu machen. Aber es scheint unmöglich, den Text in der Mitte vertikal auszurichten. Irgendeine Idee wie kann ich das erreichen? Ich möchte, dass es reagiert. Ich meine, an allen Geräten zu arbeiten. Vielen Dank.

<tr> 
    <td> 
     Small text 
    </td> 
    <td class="" style="height: 1px; height: 100%"> 
     <div style="position: relative"> 
      <span class="centered-text"> A very long text that I want to be centered inside parent div and of course parent td.</span> 
     </div> 
    </td> 
</tr> 

Answer 1

Ohne Ihren Codes zu sehen, es ist ein wenig schwierig, Ihnen eine genaue Antwort zu geben. Aber meine bevorzugte Methode zur Lösung dieses Problems, vor allem für ansprechende Lösungen, (solange Sie nicht brauchen, um alles unter IE9 unterstützt) ist die folgende:

.text-container { 
    position: relative; 
} 

.centered-text { 
    position: absolute; 
    top: 50%; 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
} 

Wenn es auch horizontal zentriert werden muss, verwenden die zusätzlich folgende und ersetzen die Eigenschaften verwandeln:

.centered-text { 
    left: 50%; 
    -webkit-transform: translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
} 

Edit: fiddle mit Position relativ aktualisiert, Raum zu füllen - zeigt endgültig voll zentriert Ergebnis.

Answer 2

Versuchen Sie, die folgende CSS zu Ihrem div hinzu:

div{ 
    display: table-cell; 
    vertical-align: middle; 
} 

Das Display Attribut bewirkt, dass die div mehr wie eine Tabellenzelle verhalten, den Stil vertikale align Sinn wird eine Wirkung haben.

Beispiel: http://codepen.io/JasonGraham/pen/aZbdmy