title: display the li tags to the middle part of a div tag
body: <p>I have been reviewing different solutions on positioning the elements to the middle part of a div tag it's easier when being done for text cause I could use this code "text-align:center" but what if I have this sample code below:</p>
  
  <pre><code>&lt;ul class="gauges" style=""&gt;
                  &lt;li style=""&gt;
                          &lt;form onclick="this.submit()" style="cursor: pointer;" method="post" action="http://dev1089.zbglobal.com/transcript/index.php"&gt;
                              &lt;div class="subject_progress_body" style=""&gt;
                                      &lt;input type="hidden" value="5" name="category_id"&gt;
                                      &lt;div class="progressbar_outer_block jgauge" style="background: url(&amp;quot;http://dev1089.zbglobal.com/transcript/gauge/jgauge_face_default.png&amp;quot;) repeat scroll 0% 0% transparent; margin-bottom: 5px; margin-top: 36px; width: 160px; height: 114px; z-index: 0;" id="progressbar_outer_0_block"&gt;&lt;canvas id="progressbar_outer_0_block-canvas-ticks" width="160" height="114" style="z-index: 2;"&gt;&lt;/canvas&gt;&lt;p class="tick-label" style="left: 1px; top: 76px; color: white; display: block; z-index: 3;"&gt;0&lt;/p&gt;&lt;p class="tick-label" style="left: 11px; top: 44px; color: white; display: block; z-index: 3;"&gt;20&lt;/p&gt;&lt;p class="tick-label" style="left: 38px; top: 25px; color: white; display: block; z-index: 3;"&gt;40&lt;/p&gt;&lt;p class="tick-label" style="left: 72px; top: 25px; color: white; display: block; z-index: 3;"&gt;60&lt;/p&gt;&lt;p class="tick-label" style="left: 99px; top: 44px; color: white; display: block; z-index: 3;"&gt;80&lt;/p&gt;&lt;p class="tick-label" style="left: 109px; top: 76px; color: white; display: block; z-index: 3;"&gt;100&lt;/p&gt;&lt;p class="label" id="progressbar_outer_0_block-label" style="left: 0px; top: 69px; color: white; display: block; z-index: 4; margin-top: 20px; font-family: Arial Black,Arial;"&gt;&lt;strong&gt;0&lt;/strong&gt; %&lt;/p&gt;&lt;span style="display: inline-block; width: 160px; height: 160px; position: absolute; left: 0px; top: 1px;" id="progressbar_outer_0_block-needle" class="needle"&gt;&lt;canvas height="226" width="226" style="position: relative; left: -33.1371px; top: -33.1371px;"&gt;&lt;/canvas&gt;&lt;/span&gt;&lt;/div&gt;
                                      &lt;center&gt;
                                          &lt;div class="course_description_block"&gt;
                                              &lt;p style="text-align: center;"&gt;Get Started&lt;/p&gt;
                                          &lt;/div&gt;
                                      &lt;/center&gt;
                              &lt;/div&gt;
                          &lt;/form&gt;
                  &lt;/li&gt;
  
                  &lt;li style=""&gt;
                          &lt;form onclick="this.submit()" style="cursor: pointer;" method="post" action="http://dev1089.zbglobal.com/transcript/index.php"&gt;
                              &lt;div class="subject_progress_body" style=""&gt;
                                      &lt;input type="hidden" value="6" name="category_id"&gt;
                                      &lt;div class="progressbar_outer_block jgauge" style="background: url(&amp;quot;http://dev1089.zbglobal.com/transcript/gauge/jgauge_face_default.png&amp;quot;) repeat scroll 0% 0% transparent; margin-bottom: 5px; margin-top: 36px; width: 160px; height: 114px; z-index: 0;" id="progressbar_outer_1_block"&gt;&lt;canvas id="progressbar_outer_1_block-canvas-ticks" width="160" height="114" style="z-index: 2;"&gt;&lt;/canvas&gt;&lt;p class="tick-label" style="left: 1px; top: 76px; color: white; display: block; z-index: 3;"&gt;0&lt;/p&gt;&lt;p class="tick-label" style="left: 11px; top: 44px; color: white; display: block; z-index: 3;"&gt;20&lt;/p&gt;&lt;p class="tick-label" style="left: 38px; top: 25px; color: white; display: block; z-index: 3;"&gt;40&lt;/p&gt;&lt;p class="tick-label" style="left: 72px; top: 25px; color: white; display: block; z-index: 3;"&gt;60&lt;/p&gt;&lt;p class="tick-label" style="left: 99px; top: 44px; color: white; display: block; z-index: 3;"&gt;80&lt;/p&gt;&lt;p class="tick-label" style="left: 109px; top: 76px; color: white; display: block; z-index: 3;"&gt;100&lt;/p&gt;&lt;p class="label" id="progressbar_outer_1_block-label" style="left: 0px; top: 69px; color: white; display: block; z-index: 4; margin-top: 20px; font-family: Arial Black,Arial;"&gt;&lt;strong&gt;0&lt;/strong&gt; %&lt;/p&gt;&lt;span style="display: inline-block; width: 160px; height: 160px; position: absolute; left: 0px; top: 1px;" id="progressbar_outer_1_block-needle" class="needle"&gt;&lt;canvas height="226" width="226" style="position: relative; left: -33.1371px; top: -33.1371px;"&gt;&lt;/canvas&gt;&lt;/span&gt;&lt;/div&gt;
                                      &lt;center&gt;
                                          &lt;div class="course_description_block"&gt;
                                              &lt;p style="text-align: center;"&gt;Make A Plan&lt;/p&gt;
                                          &lt;/div&gt;
                                      &lt;/center&gt;
                              &lt;/div&gt;
                          &lt;/form&gt;
                  &lt;/li&gt;
  
                  &lt;li style=""&gt;
                          &lt;form onclick="this.submit()" style="cursor: pointer;" method="post" action="http://dev1089.zbglobal.com/transcript/index.php"&gt;
                              &lt;div class="subject_progress_body" style=""&gt;
                                      &lt;input type="hidden" value="8" name="category_id"&gt;
                                      &lt;div class="progressbar_outer_block jgauge" style="background: url(&amp;quot;http://dev1089.zbglobal.com/transcript/gauge/jgauge_face_default.png&amp;quot;) repeat scroll 0% 0% transparent; margin-bottom: 5px; margin-top: 36px; width: 160px; height: 114px; z-index: 0;" id="progressbar_outer_2_block"&gt;&lt;canvas id="progressbar_outer_2_block-canvas-ticks" width="160" height="114" style="z-index: 2;"&gt;&lt;/canvas&gt;&lt;p class="tick-label" style="left: 1px; top: 76px; color: white; display: block; z-index: 3;"&gt;0&lt;/p&gt;&lt;p class="tick-label" style="left: 11px; top: 44px; color: white; display: block; z-index: 3;"&gt;20&lt;/p&gt;&lt;p class="tick-label" style="left: 38px; top: 25px; color: white; display: block; z-index: 3;"&gt;40&lt;/p&gt;&lt;p class="tick-label" style="left: 72px; top: 25px; color: white; display: block; z-index: 3;"&gt;60&lt;/p&gt;&lt;p class="tick-label" style="left: 99px; top: 44px; color: white; display: block; z-index: 3;"&gt;80&lt;/p&gt;&lt;p class="tick-label" style="left: 109px; top: 76px; color: white; display: block; z-index: 3;"&gt;100&lt;/p&gt;&lt;p class="label" id="progressbar_outer_2_block-label" style="left: 0px; top: 69px; color: white; display: block; z-index: 4; margin-top: 20px; font-family: Arial Black,Arial;"&gt;&lt;strong&gt;0&lt;/strong&gt; %&lt;/p&gt;&lt;span style="display: inline-block; width: 160px; height: 160px; position: absolute; left: 0px; top: 1px;" id="progressbar_outer_2_block-needle" class="needle"&gt;&lt;canvas height="226" width="226" style="position: relative; left: -33.1371px; top: -33.1371px;"&gt;&lt;/canvas&gt;&lt;/span&gt;&lt;/div&gt;
                                      &lt;center&gt;
                                          &lt;div class="course_description_block"&gt;
                                              &lt;p style="text-align: center;"&gt; Make It Happen&lt;/p&gt;
                                          &lt;/div&gt;
                                      &lt;/center&gt;
                              &lt;/div&gt;
                          &lt;/form&gt;
                  &lt;/li&gt;
  
                  &lt;li style=""&gt;
                          &lt;form onclick="this.submit()" style="cursor: pointer;" method="post" action="http://dev1089.zbglobal.com/transcript/index.php"&gt;
                              &lt;div class="subject_progress_body" style=""&gt;
                                      &lt;input type="hidden" value="1" name="category_id"&gt;
                                      &lt;div class="progressbar_outer_block jgauge" style="background: url(&amp;quot;http://dev1089.zbglobal.com/transcript/gauge/jgauge_face_default.png&amp;quot;) repeat scroll 0% 0% transparent; margin-bottom: 5px; margin-top: 36px; width: 160px; height: 114px; z-index: 0;" id="progressbar_outer_3_block"&gt;&lt;canvas id="progressbar_outer_3_block-canvas-ticks" width="160" height="114" style="z-index: 2;"&gt;&lt;/canvas&gt;&lt;p class="tick-label" style="left: 1px; top: 76px; color: white; display: block; z-index: 3;"&gt;0&lt;/p&gt;&lt;p class="tick-label" style="left: 11px; top: 44px; color: white; display: block; z-index: 3;"&gt;20&lt;/p&gt;&lt;p class="tick-label" style="left: 38px; top: 25px; color: white; display: block; z-index: 3;"&gt;40&lt;/p&gt;&lt;p class="tick-label" style="left: 72px; top: 25px; color: white; display: block; z-index: 3;"&gt;60&lt;/p&gt;&lt;p class="tick-label" style="left: 99px; top: 44px; color: white; display: block; z-index: 3;"&gt;80&lt;/p&gt;&lt;p class="tick-label" style="left: 109px; top: 76px; color: white; display: block; z-index: 3;"&gt;100&lt;/p&gt;&lt;p class="label" id="progressbar_outer_3_block-label" style="left: 0px; top: 69px; color: white; display: block; z-index: 4; margin-top: 20px; font-family: Arial Black,Arial;"&gt;&lt;strong&gt;0&lt;/strong&gt; %&lt;/p&gt;&lt;span style="display: inline-block; width: 160px; height: 160px; position: absolute; left: 0px; top: 1px;" id="progressbar_outer_3_block-needle" class="needle"&gt;&lt;canvas height="226" width="226" style="position: relative; left: -33.1371px; top: -33.1371px;"&gt;&lt;/canvas&gt;&lt;/span&gt;&lt;/div&gt;
                                      &lt;center&gt;
                                          &lt;div class="course_description_block"&gt;
                                              &lt;p style="text-align: center;"&gt;Business Basics&lt;/p&gt;
                                          &lt;/div&gt;
                                      &lt;/center&gt;
                              &lt;/div&gt;
                          &lt;/form&gt;
                  &lt;/li&gt;
  
                  &lt;li style=""&gt;
                          &lt;form onclick="this.submit()" style="cursor: pointer;" method="post" action="http://dev1089.zbglobal.com/transcript/index.php"&gt;
                              &lt;div class="subject_progress_body" style=""&gt;
                                      &lt;input type="hidden" value="2" name="category_id"&gt;
                                      &lt;div class="progressbar_outer_block jgauge" style="background: url(&amp;quot;http://dev1089.zbglobal.com/transcript/gauge/jgauge_face_default.png&amp;quot;) repeat scroll 0% 0% transparent; margin-bottom: 5px; margin-top: 36px; width: 160px; height: 114px; z-index: 0;" id="progressbar_outer_4_block"&gt;&lt;canvas id="progressbar_outer_4_block-canvas-ticks" width="160" height="114" style="z-index: 2;"&gt;&lt;/canvas&gt;&lt;p class="tick-label" style="left: 1px; top: 76px; color: white; display: block; z-index: 3;"&gt;0&lt;/p&gt;&lt;p class="tick-label" style="left: 11px; top: 44px; color: white; display: block; z-index: 3;"&gt;20&lt;/p&gt;&lt;p class="tick-label" style="left: 38px; top: 25px; color: white; display: block; z-index: 3;"&gt;40&lt;/p&gt;&lt;p class="tick-label" style="left: 72px; top: 25px; color: white; display: block; z-index: 3;"&gt;60&lt;/p&gt;&lt;p class="tick-label" style="left: 99px; top: 44px; color: white; display: block; z-index: 3;"&gt;80&lt;/p&gt;&lt;p class="tick-label" style="left: 109px; top: 76px; color: white; display: block; z-index: 3;"&gt;100&lt;/p&gt;&lt;p class="label" id="progressbar_outer_4_block-label" style="left: 0px; top: 69px; color: white; display: block; z-index: 4; margin-top: 20px; font-family: Arial Black,Arial;"&gt;&lt;strong&gt;0&lt;/strong&gt; %&lt;/p&gt;&lt;span style="display: inline-block; width: 160px; height: 160px; position: absolute; left: 0px; top: 1px;" id="progressbar_outer_4_block-needle" class="needle"&gt;&lt;canvas height="226" width="226" style="position: relative; left: -33.1371px; top: -33.1371px;"&gt;&lt;/canvas&gt;&lt;/span&gt;&lt;/div&gt;
                                      &lt;center&gt;
                                          &lt;div class="course_description_block"&gt;
                                              &lt;p style="text-align: center;"&gt;Engaging Colleagues &amp;amp; Leading People&lt;/p&gt;
                                          &lt;/div&gt;
                                      &lt;/center&gt;
                              &lt;/div&gt;
                          &lt;/form&gt;
                  &lt;/li&gt;
  
                  &lt;li style=""&gt;
                          &lt;form onclick="this.submit()" style="cursor: pointer;" method="post" action="http://dev1089.zbglobal.com/transcript/index.php"&gt;
                              &lt;div class="subject_progress_body" style=""&gt;
                                      &lt;input type="hidden" value="3" name="category_id"&gt;
                                      &lt;div class="progressbar_outer_block jgauge" style="background: url(&amp;quot;http://dev1089.zbglobal.com/transcript/gauge/jgauge_face_default.png&amp;quot;) repeat scroll 0% 0% transparent; margin-bottom: 5px; margin-top: 36px; width: 160px; height: 114px; z-index: 0;" id="progressbar_outer_5_block"&gt;&lt;canvas id="progressbar_outer_5_block-canvas-ticks" width="160" height="114" style="z-index: 2;"&gt;&lt;/canvas&gt;&lt;p class="tick-label" style="left: 1px; top: 76px; color: white; display: block; z-index: 3;"&gt;0&lt;/p&gt;&lt;p class="tick-label" style="left: 11px; top: 44px; color: white; display: block; z-index: 3;"&gt;20&lt;/p&gt;&lt;p class="tick-label" style="left: 38px; top: 25px; color: white; display: block; z-index: 3;"&gt;40&lt;/p&gt;&lt;p class="tick-label" style="left: 72px; top: 25px; color: white; display: block; z-index: 3;"&gt;60&lt;/p&gt;&lt;p class="tick-label" style="left: 99px; top: 44px; color: white; display: block; z-index: 3;"&gt;80&lt;/p&gt;&lt;p class="tick-label" style="left: 109px; top: 76px; color: white; display: block; z-index: 3;"&gt;100&lt;/p&gt;&lt;p class="label" id="progressbar_outer_5_block-label" style="left: 0px; top: 69px; color: white; display: block; z-index: 4; margin-top: 20px; font-family: Arial Black,Arial;"&gt;&lt;strong&gt;0&lt;/strong&gt; %&lt;/p&gt;&lt;span style="display: inline-block; width: 160px; height: 160px; position: absolute; left: 0px; top: 1px;" id="progressbar_outer_5_block-needle" class="needle"&gt;&lt;canvas height="226" width="226" style="position: relative; left: -33.1371px; top: -33.1371px;"&gt;&lt;/canvas&gt;&lt;/span&gt;&lt;/div&gt;
                                      &lt;center&gt;
                                          &lt;div class="course_description_block"&gt;
                                              &lt;p style="text-align: center;"&gt;Managing People, Products &amp;amp; Processes&lt;/p&gt;
                                          &lt;/div&gt;
                                      &lt;/center&gt;
                              &lt;/div&gt;
                          &lt;/form&gt;
                  &lt;/li&gt;
  
                  &lt;li style=""&gt;
                          &lt;form onclick="this.submit()" style="cursor: pointer;" method="post" action="http://dev1089.zbglobal.com/transcript/index.php"&gt;
                              &lt;div class="subject_progress_body" style=""&gt;
                                      &lt;input type="hidden" value="4" name="category_id"&gt;
                                      &lt;div class="progressbar_outer_block jgauge" style="background: url(&amp;quot;http://dev1089.zbglobal.com/transcript/gauge/jgauge_face_default.png&amp;quot;) repeat scroll 0% 0% transparent; margin-bottom: 5px; margin-top: 36px; width: 160px; height: 114px; z-index: 0;" id="progressbar_outer_6_block"&gt;&lt;canvas id="progressbar_outer_6_block-canvas-ticks" width="160" height="114" style="z-index: 2;"&gt;&lt;/canvas&gt;&lt;p class="tick-label" style="left: 1px; top: 76px; color: white; display: block; z-index: 3;"&gt;0&lt;/p&gt;&lt;p class="tick-label" style="left: 11px; top: 44px; color: white; display: block; z-index: 3;"&gt;20&lt;/p&gt;&lt;p class="tick-label" style="left: 38px; top: 25px; color: white; display: block; z-index: 3;"&gt;40&lt;/p&gt;&lt;p class="tick-label" style="left: 72px; top: 25px; color: white; display: block; z-index: 3;"&gt;60&lt;/p&gt;&lt;p class="tick-label" style="left: 99px; top: 44px; color: white; display: block; z-index: 3;"&gt;80&lt;/p&gt;&lt;p class="tick-label" style="left: 109px; top: 76px; color: white; display: block; z-index: 3;"&gt;100&lt;/p&gt;&lt;p class="label" id="progressbar_outer_6_block-label" style="left: 0px; top: 69px; color: white; display: block; z-index: 4; margin-top: 20px; font-family: Arial Black,Arial;"&gt;&lt;strong&gt;0&lt;/strong&gt; %&lt;/p&gt;&lt;span style="display: inline-block; width: 160px; height: 160px; position: absolute; left: 0px; top: 1px;" id="progressbar_outer_6_block-needle" class="needle"&gt;&lt;canvas height="226" width="226" style="position: relative; left: -33.1371px; top: -33.1371px;"&gt;&lt;/canvas&gt;&lt;/span&gt;&lt;/div&gt;
                                      &lt;center&gt;
                                          &lt;div class="course_description_block"&gt;
                                              &lt;p style="text-align: center;"&gt;Influencing the Organization&lt;/p&gt;
                                          &lt;/div&gt;
                                      &lt;/center&gt;
                              &lt;/div&gt;
                          &lt;/form&gt;
                  &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I'm using jgauge for this element here is the sample screenshot of what it looks like on the site:</p>
  
  <p><img src="https://i.stack.imgur.com/4ii2Q.png" alt="Sample Screenshot"></p>
  
  <p>The number of gauges is dynamic and once the number of elements being displayed is less than four it should be positioned at the middle both the gauge and it's text description as well.</p>
  
  <p>Thanks in advance.</p>