html - div 样式表中的垂直对齐文本

Question

我正在尝试垂直对齐所有文本。

如果我删除 float:left;然后整张 table 就消失了？

.div-table{
  display:table;         
  width:auto;         
  background-color:#ffffff;               
  border-spacing:20px;
}
.div-table-row{
  display:table-row;
  width:auto;
  clear:both;
}
.div-table-col{
  float:left;
  display:table-column;         
  width:180px;         
  background-color:LightSteelBlue;  
  height:60px;
  text-align: center;
  box-shadow: 3px 3px 3px 0 rgba(0,0,0,0.3) ;
  vertical-align: middle;
}

      <div class="div-table">
             <div class="div-table-row">
                <div class="div-table-col" align="center">Mortgage Lender</div>
                <div  class="div-table-col">Type</div>
                <div  class="div-table-col">Initial Period (mths)</div>
                <div  class="div-table-col">Initial Rate (%)</div>
                <div  class="div-table-col">SVR (%)</div>
                <div  class="div-table-col">Max Amount (£'s)</div>
                <div  class="div-table-col">Max LTV (%)</div>
                <div  class="div-table-col">Monthly Repayment (£'s)</div>
             </div>
            <div class="div-table-row">
                 <div class="div-table-col">Nationwide</div>
                <div class="div-table-col">Fixed</div>
                <div class="div-table-col">24</div>
                 <div class="div-table-col">1.99</div>
                <div class="div-table-col">3.99</div>
                <div class="div-table-col">1000000</div>
                <div class="div-table-col">65</div>
                <div class="div-table-col">Calc</div>
            </div>
            <div class="div-table-row">
                 <div class="div-table-col">Nationwide</div>
                <div class="div-table-col">Fixed</div>
                <div class="div-table-col">24</div>
                 <div class="div-table-col">1.99</div>
                <div class="div-table-col">3.99</div>
                <div class="div-table-col">1000000</div>
                <div class="div-table-col">65</div>
                <div class="div-table-col">Calc</div>
            </div>
            <div class="div-table-row">
                 <div class="div-table-col">Nationwide</div>
                <div class="div-table-col">Fixed</div>
                <div class="div-table-col">24</div>
                 <div class="div-table-col">1.99</div>
                <div class="div-table-col">3.99</div>
                <div class="div-table-col">1000000</div>
                <div class="div-table-col">65</div>
                <div class="div-table-col">Calc</div>
            </div>
            <div class="div-table-row">
                 <div class="div-table-col">Nationwide</div>
                <div class="div-table-col">Fixed</div>
                <div class="div-table-col">24</div>
                 <div class="div-table-col">1.99</div>
                <div class="div-table-col">3.99</div>
                <div class="div-table-col">1000000</div>
                <div class="div-table-col">65</div>
                <div class="div-table-col">Calc</div>
            </div>
            <div class="div-table-row">
                 <div class="div-table-col">Nationwide</div>
                <div class="div-table-col">Fixed</div>
                <div class="div-table-col">24</div>
                 <div class="div-table-col">1.99</div>
                <div class="div-table-col">3.99</div>
                <div class="div-table-col">1000000</div>
                <div class="div-table-col">65</div>
                <div class="div-table-col">Calc</div>
            </div>
            <div class="div-table-row">
                 <div class="div-table-col">Nationwide</div>
                <div class="div-table-col">Fixed</div>
                <div class="div-table-col">24</div>
                 <div class="div-table-col">1.99</div>
                <div class="div-table-col">3.99</div>
                <div class="div-table-col">1000000</div>
                <div class="div-table-col">65</div>
                <div class="div-table-col">Calc</div>
            </div>

      </div>

出于正当理由，我正在使用 div 制作表格，所以请不要“您应该使用 <table> 来制作表格数据。” :)

谢谢

Answer 1

使用 th (display : table-header-group;):即

.div-table{
  display:table;
}
.div-table-row{
  display:table-row;
  width:auto;
  height:auto;
}
.thead{
  display : table-header-group;
  background:red;
}
.tbody{
  display : table-row-group;
  width:500px;
  height:500px;
  background:green;
}
.div-table-cell
{
  display:table-cell;         
  width:100px;
  height:100px;
}

see this code