Wie vertikale Mitte zwei Elemente in der gleichen Tabelle Zelle

Question

Ich habe eine Tabelle mit 5 Spalten, von denen alle vertikal ausgerichtet sind: Mitte. Die ersten 4 Spalten bestehen aus nur Text, der vertikal in der Mitte der Zelle ausgerichtet ist. Diese ersten vier Spalten sind schön formatiert; Die letzte Zelle besteht jedoch aus zwei Divs. Der erste ist ein Text, der links schwebt, und der zweite ist ein Knopf, der nach rechts schwebt. Hier ist der HTML-Code für die letzte Zelle:

<td> 
 
     <div style="float:left; width:50%"> 
 
       Text Not In Middle Of Cell 
 
     </div> 
 
     <div style="float:right; width:50%"> 
 
       <button type="button">Button Text</button> 
 
     </div> 
 
    </td>

unten im Bild suchen, können Sie sehen, dass der Text nicht vertikal in der Mitte der Zelle ausgerichtet ist. Gibt es eine Möglichkeit, den Text in der Mitte der Zelle zu zentrieren, mit der er lebt? Ich habe versucht, vertikal-align: Mitte zu den divs hinzuzufügen, aber das hat nicht funktioniert. Es macht Sinn, da div die Höhe des Textes ist, so dass der Text nicht vertikal ausgerichtet wird. Gibt es einen anderen Weg, dies zu erreichen? Vielen Dank für Ihre Hilfe!

Answer 1

Sie können eine Flexbox verwenden.

.container { 
 
    display: flex; 
 
    align-items: center; 
 
} 
 

 
.container button { 
 
    margin-left: .5em; 
 
}

<td> 
 
    <div class="container"> 
 
    <div> 
 
     Text Not In Middle Of Cell 
 
    </div> 
 
    <div> 
 
     <button type="button">Button Text</button> 
 
    </div> 
 
    </div> 
 
</td>

Answer 2

Ja, Sie können mit: vor, aber Sie haben Höhe

hier für div eingestellt ist ein Beispielcode

 .text_div{ 
 
     float:left; 
 
     width:50%; 
 
     height: 100px; 
 
     background-color:#f00; 
 
\t } 
 
\t .text_div:before { 
 
\t \t content: ' '; 
 
\t \t display: inline-block; 
 
\t \t vertical-align: middle; 
 
\t \t height: 100%; 
 
\t } 
 
\t .text_div{ 
 
\t \t vertical-align: middle; 
 
\t \t display: inline-block; 
 
\t }

<td> 
 
    <div class="text_div"> 
 
     <a>Text Not In Middle Of Cell</a> 
 
    </div> 
 
    <div style="float:right; width:50%"> 
 
      <button type="button">Button Text</button> 
 
    </div> 
 
</td>