отобразить теги li в средней части тега div - PullRequest
Новая
       39

отобразить теги li в средней части тега div

2 голосов
/ 09 ноября 2011

Я рассматривал различные решения по расположению элементов в средней части тега div, так как это легче сделать, когда я делаю для текста, потому что я мог бы использовать этот код "text-align: center", но что, если у меня есть этот пример кода ниже: 

<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(&quot;http://dev1089.zbglobal.com/transcript/gauge/jgauge_face_default.png&quot;) 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(&quot;http://dev1089.zbglobal.com/transcript/gauge/jgauge_face_default.png&quot;) 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(&quot;http://dev1089.zbglobal.com/transcript/gauge/jgauge_face_default.png&quot;) 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(&quot;http://dev1089.zbglobal.com/transcript/gauge/jgauge_face_default.png&quot;) 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(&quot;http://dev1089.zbglobal.com/transcript/gauge/jgauge_face_default.png&quot;) 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 &amp; 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(&quot;http://dev1089.zbglobal.com/transcript/gauge/jgauge_face_default.png&quot;) 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 &amp; 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(&quot;http://dev1089.zbglobal.com/transcript/gauge/jgauge_face_default.png&quot;) 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>

Я использую jgauge для этого элемента, вот пример скриншота того, как он выглядит на сайте:

Sample Screenshot

КоличествоИндикаторы являются динамическими, и как только количество отображаемых элементов становится меньше четырех, их следует размещать посередине как для индикатора, так и для его текстового описания.

Заранее спасибо.

Ответы [ 2 ]

1 голос
/ 09 ноября 2011 
.gauges { text-align:center }
.gauges li { display:inline-block }

Кроме того, вы должны отметить, что ваш HTML не синтаксически допустим для HTML4, но действителен для HTML5 (предлагается);убедитесь, что вы описываете свой документ с правильным DOCTYPE.

0 голосов
/ 09 ноября 2011

Как правило, вы можете центрировать div внутри другого элемента уровня блока, используя поля. 

.course_description_block {
    margin: auto;
}

Текст в div можно позиционировать, используя обычный старый text-align: center.

...