位置：絕對和垂直對齊：中間

Question

如何設置我的示例中的第三列，使vertical-align: middle與所有其他行一樣？我意識到問題是與position: absolute，但我不知道如何解決這個問題。

https://jsfiddle.net/pr1v6Lhd/1/

與頂級即使定位爲.data不起作用。

我的HTML：

<table border="1"> 
    <tbody> 
    <tr> 
     <td>ADMIN</td> 
     <td>222387</td> 
     <td width='50' style='position:relative'> 
     <div class='data'>59853.94</div> 
     <div class="bar-chart-bar"> 
      <div class="bar" style='width:50%; background-color:#B8E4F5'></div> 
     </div> 
     </td> 
     <td width="50">0</td> 
     <td>59853.94</td> 
     <td>4189.82</td> 
     <td>7</td> 
    </tr> 
    </tbody> 
</table> 

我的CSS：

.bar-chart-bar { 
    background-color: #e8e8e8; 
    display: block; 
    position: relative; 
    width: 100%; 
    height: 20px; 
} 

.bar { 
    float: left; 
    height: 100%; 
} 

.data { 
    position: absolute; 
    z-index: 1; 
    display: block; 
    top: 10; 
} 

.table > tbody > tr > td { 
    vertical-align: middle; 
} 

table { 
    font-size: 12px; 
} 

Answer 1

是的，你需要相應地刪除position: absolute從.data和絕對位置的.bar-圖吧和設置的z-index：

.bar-chart-bar { 
    background-color: #e8e8e8; 
    display: block; 
    position: absolute; 
    width: 100%; 
    height: 20px; 
    top: 0; 
    left: 0; 
    z-index: -1; 
} 

https://jsfiddle.net/jamesking/pr1v6Lhd/2/

Answer 2

添加display:table到類data

.bar-chart-bar { 
 
    background-color: #e8e8e8; 
 
    display: block; 
 
    position: relative; 
 
    width: 100%; 
 
    height: 20px; 
 
} 
 

 
.bar { 
 
    float: left; 
 
    height: 100%; 
 
} 
 

 
.data { 
 
    position: absolute; 
 
    z-index: 1; 
 
    display:table; 
 
} 
 

 
.table > tbody > tr > td { 
 
    vertical-align: middle; 
 
} 
 

 
table { 
 
    font-size: 12px; 
 
}

<table border="1"> 
 
    <tbody> 
 
    <tr> 
 
     <td>ADMIN</td> 
 
     <td>222387</td> 
 
     <td width='50' style='position:relative'> 
 
     <div class='data'>59853.94</div> 
 
     <div class="bar-chart-bar"> 
 
      <div class="bar" style='width:50%; background-color:#B8E4F5'></div> 
 
     </div> 
 
     </td> 
 
     <td width="50">0</td> 
 
     <td>59853.94</td> 
 
     <td>4189.82</td> 
 
     <td>7</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 3

刪除位置，使您的數據格酒吧的孩子。

.bar-chart-bar { 
 
    background-color: #e8e8e8; 
 
    display: block; 
 
    width: 100%; 
 
} 
 

 
.bar { 
 
    float: left; 
 
    height: 100%; 
 
} 
 

 
.data { 
 
    z-index: 1; 
 
} 
 

 
.table > tbody > tr > td { 
 
    vertical-align: middle; 
 
} 
 

 
table { 
 
    font-size: 12px; 
 
}

<table border="1"> 
 
    <tbody> 
 
    <tr> 
 
     <td>ADMIN</td> 
 
     <td>222387</td> 
 
     <td width='50' style='position:relative'> 
 
     <div class="bar-chart-bar"> 
 
      <div class="bar" style='width:50%; background-color:#B8E4F5'> 
 
       <div class='data'>59853.94</div> 
 
      </div> 
 
     </div> 
 
     </td> 
 
     <td width="50">0</td> 
 
     <td>59853.94</td> 
 
     <td>4189.82</td> 
 
     <td>7</td> 
 
    </tr> 
 
    </tbody> 
 
</table>