vss包含在div中的垂直圖不是垂直居中在其父div內

請參閱this jsfiddle code。 div本身集中在它的父div中，但ul/li垂直圖不是集中的。vss包含在div中的垂直圖不是垂直居中在其父div內

我一直對我的頭撞css一段時間，似乎無法理解爲什麼發生這種情況。爲什麼圖表不在div的中心？

我將代碼保持在最小值以下來顯示圖形。在我的測試區域上面div類「graph-container」是另一個div，它包含一個正確居中的數據表;它的div類使用相同的margin-left/right：auto;

要清楚，我想看到的是每個垂直條形圖，基本上低於「當前土壤水平」而不是左側的小孩。

謝謝。

CSS

div.graph-container{ 
    margin-left: auto; 
    margin-right: auto; 
    font: 14px arial, sans-serif; 
    text-align: center; 
    width: 100%; 
} 
div.graphs{ 
    margin-left: auto; 
    margin-right: auto; 
} 
div.graphs div{ 
    float: left; 
    padding: 5px; 
} 
#q-graph { 
    position: relative; 
    width: 50px; 
    height:150px; 
    margin: 1.1em 0 3.5em; 
    padding: 0; 
    background: #DDD; 
    border: 2px solid gray; 
    list-style: none; 
    border-radius: 55px; 
} 
#q-graph li { 
    position: absolute; 
    bottom: 0; 
    z-index: 2; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
#q-graph ul { 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
#q-graph li.bar { 
    width: 50px; 
    border-radius: 10px 10px 55px 55px; 
    color: #000; 
} 
#q-graph li.light { 
    background: #CCCC52; 
} 
#q-graph li.moisture { 
    background: #66A3FF; 
} 
#q-graph li.temperature { 
    background: #FF944D; 
}

HTML

<html> 
<head> 
<link rel="stylesheet" type="text/css" href="barchart.css"></script> 
</head> 
<body> 
<div> 

    </br> 
    </br> 
    <div class="graph-container"> 
     Current Soil Levels 
     <div class="graphs"> 
      <div> 
       Light 
       <ul id="q-graph"> 
        <li class="qtr" id="q1"> 
         <ul> 
          <li class="light bar" style="height: 100px;"></li> 
         </ul> 
        </li> 
       </ul> 
      </div> 
      <div> 
       Moisture 
       <ul id="q-graph"> 
        <li class="qtr" id="q1"> 
         <ul> 
          <li class="moisture bar" style="height: 32px;"></li> 
         </ul> 
        </li> 
       </ul> 
      </div> 
      <div> 
       Soil (F) 
       <ul id="q-graph"> 
        <li class="qtr" id="q1"> 
         <ul> 
          <li class="temperature bar" style="height: 50px;"></li> 
         </ul> 
        </li> 
       </ul> 
      </div> 
     </div> 
    </div> 

</div> 
</body> 
</html>

來源

2013-07-19 Joel Slowik

這是因爲div.graphs繼承了全寬，如果你給它一個合適的寬度（即不是100％，他們會中心。（嘗試200px或其他東西）

來源

2013-07-19 11:57:25 Tdelang

DOH！現在你明確指出了這一點非常明顯，我知道它會是這樣簡單的，感謝你的快速反應！ –

vss包含在div中的垂直圖不是垂直居中在其父div內

回答

相關問題