在div样式表中垂直对齐文本

Question

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

如果我删除float：left;整个表格消失了吗？

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我使用div制作表格是有正当理由的，所以请不要＆＃34;您应该使用<table>表格数据。＆＃34; ：）

由于

Answer 1

使用 th（display：table-header-group;）：ie。

.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

Answer 2

如果文本总是在一行上你可以添加：

.div-table-col {        
    line-height: 60px;
    }

Answer 3

类.div-table-col的元素与表格单元格同义，而不是列。如果您将显示更改为table-cell而不是table-column，您将获得一个表格布局，您将不再需要float：left。