0

请参阅此 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>
4

1 回答 1

1

这是因为 div.graphs 继承了全宽，如果你给它一个合适的宽度（即不是 100%，它们会居中。（尝试 200px 或其他东西。）

于 2013-07-19T11:57:25.117 回答