この jsfiddle コードを参照してください。div 自体は親 div 内で中央に配置されていますが、ul/li の垂直グラフは中央に配置されていません。
私はしばらく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>