将li标签显示在div标签的中间部分

时间：2011-11-08 23:24:51

标签： css html position center

我一直在审查将元素定位到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

仪表的数量是动态的，一旦显示的元素数量少于4个，它应该位于仪表及其文本描述的中间位置。

提前致谢。

2 个答案:

答案 0 :(得分：1)

.gauges { text-align:center }
.gauges li { display:inline-block }

另外，您应该注意到HTML在语法上对HTML4没有效力，但对HTML5（建议）有效;确保使用正确的DOCTYPE描述您的文档。

答案 1 :(得分：-1)

通常，您可以使用边距将div放在另一个块级元素中。

.course_description_block {
    margin: auto;
}

div中的文本可以使用普通的旧text-align：center。

定位
相关问题
最新问题