自動的にセンタリングするtdのデフォルトのCSS

Question

tdのデフォルトのCSSは何ですか？自動的に材料が垂直にセンタリングされるようにしますか？

私はdivが親よりもmargin: 0 autoであることを考慮して、水平に中心を置く方法を知っていますが、自動的に垂直に中心を合わせることができるのは何ですか？ユーザーエージェントスタイルシートすなわちデフォルトのブラウザのスタイルシートでTD & TRため

#outer { 
 
    width: 200px; 
 
    height: 200px; 
 
    background-color: yellow; 
 
} 
 

 
#inner { 
 
    width: 60%; 
 
    margin: auto; 
 
    background-color: red; 
 
}

<div id="outer"> 
 
    <div id="inner"> 
 
    centered only horizontally 
 
    </div> 
 
</div> 
 

 
<table height=200 border=1> 
 
    <tr> 
 
    <td> 
 
     I center automatically 
 
    </td> 
 
    </tr> 
 
</table>

Answer 1

ような何かを行うことができ、デフォルトのスタイルシートを上書きする

vertical-align: middle; 

。このプロパティはvertical-alignも受け入れます。

td { 
 
    vertical-align: middle; 
 
} 
 

 
.outer { 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    width: 400px; 
 
    height: 200px; 
 
    border: 1px solid black; 
 
} 
 

 
.inner { 
 
    width: 60%; 
 
    margin: 0 auto; 
 
    background-color: yellow; 
 
    text-align: center; 
 
}

<table height="200" border="1"> 
 
    <tr> 
 
    <td>I am vertically centered</td> 
 
    </tr> 
 
</table> 
 

 
<div class="outer"> 
 
    <div class="inner"> 
 
    This is vertically centered 
 
    </div> 
 
</div>

Answer 2

vertical-align: inherited; 

。そこで、TDは、以下のようなTBODYの垂直方向のアラインメントを参照しています。 、あなたはtd要素のデフォルトCSSがdisplay: table-cellある

td{ 
vertical-align: top !important ; 
} 

Answer 3

#outer{display:table-cell;} 
#inner{vertical-align:middle;}