html - vss vertical graph wrapped in div are not vertically centering within its parent div -


see this jsfiddle code. div centering within parent div, ul/li vertical graphs not centering.

i've been banging head against css awhile , can't seem grasp why happening. why graphs not centering within div?

i've kept code below minimal show graphs. in test region above div class "graph-container" div contains table of data centering properly; it's div class using same margin-left/right: auto;

to clear, i'd see each vertical bar graph, basically, below "current soil levels" rather kiddie-cornered left.

thanks.

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>

it's because div.graphs inherits full width, if give appropriate width (i.e. not 100%, they'll center. (try 200px or something.)


Comments

Post a Comment