内部にdivがある場合のHTMLテーブルセルの垂直方向の整列

Question

私は非常に単純なHTMLテーブルを持っています。 1つの列しか使用しません。私の表のセルの中の単語 "名前"は、垂直方向に中心を置くべきですが、数字と改行でdivを追加すると、 "名前"というテキストは、もはや垂直に中央に配置されません。

私は垂直整列作業を再び行うことができますか？

JavaScript/jQueryを使用しないクロスブラウザソリューションを探しています。

<table style="width: 100px"> 
 
    <tr> 
 
    <td style="width: 100px; vertical-align: middle">Name<div style="float: right">1<br />2<br />3</div> 
 
    </td> 
 
    </tr> 
 
</table>

Answer 1

floatが、displayを使用しないでください。

： inline-block要素が縦にあなたのコメント私はこれを行うだろうか

td { 
 
    width: 100px; 
 
    vertical-align: middle 
 
} 
 

 
td>div { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 
table { 
 
background:linear-gradient(0deg, transparent 50%, rgba(0,0,0,0.2) 50%),linear-gradient(90deg, transparent 50%, rgba(0,0,0,0.2) 50%)

<table style="width: 400px"> 
 
    <tr> 
 
    <td>Name 
 
     <div>1<br />2<br />3</div> 
 
    </td> 
 
    <td>Name 
 
     <div>1<br />2033</div> 
 
    </td> 
 
    </tr> 
 
</table>

からbaseline

<table style="width: 100px"> 
 
    <tr> 
 
    <td style="width: 100px; vertical-align: middle">Name<div style="display:inline-block;vertical-align:middle;">1<br />2<br />3</div> 
 
    </td> 
 
    </tr> 
 
</table>

推測から整列させることができます

td, 
 
th { 
 
    vertical-align: middle 
 
} 
 

 
table { 
 
    background: linear-gradient(0deg, transparent 50%, rgba(0, 0, 0, 0.2) 50%), linear-gradient(90deg, transparent 50%, rgba(0, 0, 0, 0.2) 50%)

<table style="width: 400px"> 
 
    <tr> 
 
    <th>Name</th> 
 
    <td>1<br />2<br />3 
 
    </td> 
 
    <th>Name</th> 
 
    <td>1<br />2033 
 
    </td> 
 
    </tr> 
 
</table>

Answer 2

私はフレキシボックスを使用してCSSスタイルを変更しました。これはあなたが必要とするものですか？

<table style="width: 100px"> 
 
    <tr> 
 
    <td style="display:flex; align-items: center">Name<div>1<br />2<br />3</div> 
 
    </td> 
 
    </tr> 
 
</table>