Question

见this jsfiddle code。 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>

Answer 1

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

包裹在div中的vss垂直图不是在其父div中垂直居中

1 个答案: