同じ表のセルにある真ん中の2つの要素を垂直に整列する方法

Question

私は5つの列を持つテーブルを持っています。最初の4列は、セルの中央に垂直に配置されたテキストだけで構成されています。これらの最初の4つの列はきれいにフォーマットされています。ただし、最後のセルは2つのdivで構成されます。最初のテキストは左に浮動し、2番目のテキストは右に浮かぶボタンです。ここで最後のセルのHTMLです：下記の絵を見て

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

は、テキストを垂直方向にセルの中央に整列されていないことがわかります。それが生きている細胞の中心にテキストを集中させる方法はありますか？私は縦の整列を追加しようとしました：中間にdivが動作しませんでした。 divはテキストの高さであるため、テキストを垂直に整列させても移動することはありません。これを達成するための他の方法がありますか？あなたが提供できるお手伝いをありがとう！

Answer 1

です。

.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

はい、あなたが使用してすることができます前に、しかし、あなたがここにあなたのdivのため

を高さを設定する必要があり、サンプルコードあなたはフレキシボックスを使用することができます

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