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:
<ul class="gauges" style="">
<li style="">
<form onclick="this.submit()" style="cursor: pointer;" method="post" action="http://dev1089.zbglobal.com/transcript/index.php">
<div class="subject_progress_body" style="">
<input type="hidden" value="5" name="category_id">
<div class="progressbar_outer_block jgauge" style="background: url("http://dev1089.zbglobal.com/transcript/gauge/jgauge_face_default.png") repeat scroll 0% 0% transparent; margin-bottom: 5px; margin-top: 36px; width: 160px; height: 114px; z-index: 0;" id="progressbar_outer_0_block"><canvas id="progressbar_outer_0_block-canvas-ticks" width="160" height="114" style="z-index: 2;"></canvas><p class="tick-label" style="left: 1px; top: 76px; color: white; display: block; z-index: 3;">0</p><p class="tick-label" style="left: 11px; top: 44px; color: white; display: block; z-index: 3;">20</p><p class="tick-label" style="left: 38px; top: 25px; color: white; display: block; z-index: 3;">40</p><p class="tick-label" style="left: 72px; top: 25px; color: white; display: block; z-index: 3;">60</p><p class="tick-label" style="left: 99px; top: 44px; color: white; display: block; z-index: 3;">80</p><p class="tick-label" style="left: 109px; top: 76px; color: white; display: block; z-index: 3;">100</p><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;"><strong>0</strong> %</p><span style="display: inline-block; width: 160px; height: 160px; position: absolute; left: 0px; top: 1px;" id="progressbar_outer_0_block-needle" class="needle"><canvas height="226" width="226" style="position: relative; left: -33.1371px; top: -33.1371px;"></canvas></span></div>
<center>
<div class="course_description_block">
<p style="text-align: center;">Get Started</p>
</div>
</center>
</div>
</form>
</li>
<li style="">
<form onclick="this.submit()" style="cursor: pointer;" method="post" action="http://dev1089.zbglobal.com/transcript/index.php">
<div class="subject_progress_body" style="">
<input type="hidden" value="6" name="category_id">
<div class="progressbar_outer_block jgauge" style="background: url("http://dev1089.zbglobal.com/transcript/gauge/jgauge_face_default.png") repeat scroll 0% 0% transparent; margin-bottom: 5px; margin-top: 36px; width: 160px; height: 114px; z-index: 0;" id="progressbar_outer_1_block"><canvas id="progressbar_outer_1_block-canvas-ticks" width="160" height="114" style="z-index: 2;"></canvas><p class="tick-label" style="left: 1px; top: 76px; color: white; display: block; z-index: 3;">0</p><p class="tick-label" style="left: 11px; top: 44px; color: white; display: block; z-index: 3;">20</p><p class="tick-label" style="left: 38px; top: 25px; color: white; display: block; z-index: 3;">40</p><p class="tick-label" style="left: 72px; top: 25px; color: white; display: block; z-index: 3;">60</p><p class="tick-label" style="left: 99px; top: 44px; color: white; display: block; z-index: 3;">80</p><p class="tick-label" style="left: 109px; top: 76px; color: white; display: block; z-index: 3;">100</p><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;"><strong>0</strong> %</p><span style="display: inline-block; width: 160px; height: 160px; position: absolute; left: 0px; top: 1px;" id="progressbar_outer_1_block-needle" class="needle"><canvas height="226" width="226" style="position: relative; left: -33.1371px; top: -33.1371px;"></canvas></span></div>
<center>
<div class="course_description_block">
<p style="text-align: center;">Make A Plan</p>
</div>
</center>
</div>
</form>
</li>
<li style="">
<form onclick="this.submit()" style="cursor: pointer;" method="post" action="http://dev1089.zbglobal.com/transcript/index.php">
<div class="subject_progress_body" style="">
<input type="hidden" value="8" name="category_id">
<div class="progressbar_outer_block jgauge" style="background: url("http://dev1089.zbglobal.com/transcript/gauge/jgauge_face_default.png") repeat scroll 0% 0% transparent; margin-bottom: 5px; margin-top: 36px; width: 160px; height: 114px; z-index: 0;" id="progressbar_outer_2_block"><canvas id="progressbar_outer_2_block-canvas-ticks" width="160" height="114" style="z-index: 2;"></canvas><p class="tick-label" style="left: 1px; top: 76px; color: white; display: block; z-index: 3;">0</p><p class="tick-label" style="left: 11px; top: 44px; color: white; display: block; z-index: 3;">20</p><p class="tick-label" style="left: 38px; top: 25px; color: white; display: block; z-index: 3;">40</p><p class="tick-label" style="left: 72px; top: 25px; color: white; display: block; z-index: 3;">60</p><p class="tick-label" style="left: 99px; top: 44px; color: white; display: block; z-index: 3;">80</p><p class="tick-label" style="left: 109px; top: 76px; color: white; display: block; z-index: 3;">100</p><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;"><strong>0</strong> %</p><span style="display: inline-block; width: 160px; height: 160px; position: absolute; left: 0px; top: 1px;" id="progressbar_outer_2_block-needle" class="needle"><canvas height="226" width="226" style="position: relative; left: -33.1371px; top: -33.1371px;"></canvas></span></div>
<center>
<div class="course_description_block">
<p style="text-align: center;"> Make It Happen</p>
</div>
</center>
</div>
</form>
</li>
<li style="">
<form onclick="this.submit()" style="cursor: pointer;" method="post" action="http://dev1089.zbglobal.com/transcript/index.php">
<div class="subject_progress_body" style="">
<input type="hidden" value="1" name="category_id">
<div class="progressbar_outer_block jgauge" style="background: url("http://dev1089.zbglobal.com/transcript/gauge/jgauge_face_default.png") repeat scroll 0% 0% transparent; margin-bottom: 5px; margin-top: 36px; width: 160px; height: 114px; z-index: 0;" id="progressbar_outer_3_block"><canvas id="progressbar_outer_3_block-canvas-ticks" width="160" height="114" style="z-index: 2;"></canvas><p class="tick-label" style="left: 1px; top: 76px; color: white; display: block; z-index: 3;">0</p><p class="tick-label" style="left: 11px; top: 44px; color: white; display: block; z-index: 3;">20</p><p class="tick-label" style="left: 38px; top: 25px; color: white; display: block; z-index: 3;">40</p><p class="tick-label" style="left: 72px; top: 25px; color: white; display: block; z-index: 3;">60</p><p class="tick-label" style="left: 99px; top: 44px; color: white; display: block; z-index: 3;">80</p><p class="tick-label" style="left: 109px; top: 76px; color: white; display: block; z-index: 3;">100</p><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;"><strong>0</strong> %</p><span style="display: inline-block; width: 160px; height: 160px; position: absolute; left: 0px; top: 1px;" id="progressbar_outer_3_block-needle" class="needle"><canvas height="226" width="226" style="position: relative; left: -33.1371px; top: -33.1371px;"></canvas></span></div>
<center>
<div class="course_description_block">
<p style="text-align: center;">Business Basics</p>
</div>
</center>
</div>
</form>
</li>
<li style="">
<form onclick="this.submit()" style="cursor: pointer;" method="post" action="http://dev1089.zbglobal.com/transcript/index.php">
<div class="subject_progress_body" style="">
<input type="hidden" value="2" name="category_id">
<div class="progressbar_outer_block jgauge" style="background: url("http://dev1089.zbglobal.com/transcript/gauge/jgauge_face_default.png") repeat scroll 0% 0% transparent; margin-bottom: 5px; margin-top: 36px; width: 160px; height: 114px; z-index: 0;" id="progressbar_outer_4_block"><canvas id="progressbar_outer_4_block-canvas-ticks" width="160" height="114" style="z-index: 2;"></canvas><p class="tick-label" style="left: 1px; top: 76px; color: white; display: block; z-index: 3;">0</p><p class="tick-label" style="left: 11px; top: 44px; color: white; display: block; z-index: 3;">20</p><p class="tick-label" style="left: 38px; top: 25px; color: white; display: block; z-index: 3;">40</p><p class="tick-label" style="left: 72px; top: 25px; color: white; display: block; z-index: 3;">60</p><p class="tick-label" style="left: 99px; top: 44px; color: white; display: block; z-index: 3;">80</p><p class="tick-label" style="left: 109px; top: 76px; color: white; display: block; z-index: 3;">100</p><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;"><strong>0</strong> %</p><span style="display: inline-block; width: 160px; height: 160px; position: absolute; left: 0px; top: 1px;" id="progressbar_outer_4_block-needle" class="needle"><canvas height="226" width="226" style="position: relative; left: -33.1371px; top: -33.1371px;"></canvas></span></div>
<center>
<div class="course_description_block">
<p style="text-align: center;">Engaging Colleagues & Leading People</p>
</div>
</center>
</div>
</form>
</li>
<li style="">
<form onclick="this.submit()" style="cursor: pointer;" method="post" action="http://dev1089.zbglobal.com/transcript/index.php">
<div class="subject_progress_body" style="">
<input type="hidden" value="3" name="category_id">
<div class="progressbar_outer_block jgauge" style="background: url("http://dev1089.zbglobal.com/transcript/gauge/jgauge_face_default.png") repeat scroll 0% 0% transparent; margin-bottom: 5px; margin-top: 36px; width: 160px; height: 114px; z-index: 0;" id="progressbar_outer_5_block"><canvas id="progressbar_outer_5_block-canvas-ticks" width="160" height="114" style="z-index: 2;"></canvas><p class="tick-label" style="left: 1px; top: 76px; color: white; display: block; z-index: 3;">0</p><p class="tick-label" style="left: 11px; top: 44px; color: white; display: block; z-index: 3;">20</p><p class="tick-label" style="left: 38px; top: 25px; color: white; display: block; z-index: 3;">40</p><p class="tick-label" style="left: 72px; top: 25px; color: white; display: block; z-index: 3;">60</p><p class="tick-label" style="left: 99px; top: 44px; color: white; display: block; z-index: 3;">80</p><p class="tick-label" style="left: 109px; top: 76px; color: white; display: block; z-index: 3;">100</p><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;"><strong>0</strong> %</p><span style="display: inline-block; width: 160px; height: 160px; position: absolute; left: 0px; top: 1px;" id="progressbar_outer_5_block-needle" class="needle"><canvas height="226" width="226" style="position: relative; left: -33.1371px; top: -33.1371px;"></canvas></span></div>
<center>
<div class="course_description_block">
<p style="text-align: center;">Managing People, Products & Processes</p>
</div>
</center>
</div>
</form>
</li>
<li style="">
<form onclick="this.submit()" style="cursor: pointer;" method="post" action="http://dev1089.zbglobal.com/transcript/index.php">
<div class="subject_progress_body" style="">
<input type="hidden" value="4" name="category_id">
<div class="progressbar_outer_block jgauge" style="background: url("http://dev1089.zbglobal.com/transcript/gauge/jgauge_face_default.png") repeat scroll 0% 0% transparent; margin-bottom: 5px; margin-top: 36px; width: 160px; height: 114px; z-index: 0;" id="progressbar_outer_6_block"><canvas id="progressbar_outer_6_block-canvas-ticks" width="160" height="114" style="z-index: 2;"></canvas><p class="tick-label" style="left: 1px; top: 76px; color: white; display: block; z-index: 3;">0</p><p class="tick-label" style="left: 11px; top: 44px; color: white; display: block; z-index: 3;">20</p><p class="tick-label" style="left: 38px; top: 25px; color: white; display: block; z-index: 3;">40</p><p class="tick-label" style="left: 72px; top: 25px; color: white; display: block; z-index: 3;">60</p><p class="tick-label" style="left: 99px; top: 44px; color: white; display: block; z-index: 3;">80</p><p class="tick-label" style="left: 109px; top: 76px; color: white; display: block; z-index: 3;">100</p><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;"><strong>0</strong> %</p><span style="display: inline-block; width: 160px; height: 160px; position: absolute; left: 0px; top: 1px;" id="progressbar_outer_6_block-needle" class="needle"><canvas height="226" width="226" style="position: relative; left: -33.1371px; top: -33.1371px;"></canvas></span></div>
<center>
<div class="course_description_block">
<p style="text-align: center;">Influencing the Organization</p>
</div>
</center>
</div>
</form>
</li>
</ul>
I’m using jgauge for this element here is the sample screenshot of what it looks like on the site:
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.
Thanks in advance.
Also, you should note that your HTML is not syntactically valid for HTML4, but is valid for HTML5 (proposed); make sure you’re describing your document with the correct DOCTYPE.