div 样式的垂直对齐文本 table

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，所以请不要 "you should use a <table> for tabular data." :)

谢谢

Answer 1

如果文本总是在一行中您可以添加：

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

Answer 2

使用第（显示：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

Answer 3

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

div 样式的垂直对齐文本 table

Vertical align text in a div style table

html

css

vertical-alignment