Databases
StackOverflow2013
Postsdbo
POvss vertical graph wrapped in div are not vertically centering within its parent div
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POvss vertical graph wrapped in div are not vertically centering within its parent div
    text
    copied!<p>See <a href="http://jsfiddle.net/wtDr6/" rel="nofollow">this jsfiddle code</a>. the div itself is centering within its parent div, but the ul/li vertical graphs are not centering.</p> <p>I've been banging my head against the css for awhile and can't seem to grasp why this is happening. Why is the graphs not centering within the div?</p> <p>I've kept the code below minimal to just show the graphs. In my test region just above div class "graph-container" is another div that contains a table of data which is centering properly; it's div class is using the same margin-left/right: auto;</p> <p>To be clear, what i'd like to see is each vertical bar graph, basically, below the "Current Soil Levels" rather than kiddie-cornered to the left.</p> <p>Thanks.</p> <p>CSS</p> <pre><code>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; } </code></pre> <p>HTML</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;link rel="stylesheet" type="text/css" href="barchart.css"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div&gt; &lt;/br&gt; &lt;/br&gt; &lt;div class="graph-container"&gt; Current Soil Levels &lt;div class="graphs"&gt; &lt;div&gt; Light &lt;ul id="q-graph"&gt; &lt;li class="qtr" id="q1"&gt; &lt;ul&gt; &lt;li class="light bar" style="height: 100px;"&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div&gt; Moisture &lt;ul id="q-graph"&gt; &lt;li class="qtr" id="q1"&gt; &lt;ul&gt; &lt;li class="moisture bar" style="height: 32px;"&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div&gt; Soil (F) &lt;ul id="q-graph"&gt; &lt;li class="qtr" id="q1"&gt; &lt;ul&gt; &lt;li class="temperature bar" style="height: 50px;"&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload