将 li 标签显示到 div 标签的中间部分答案

【问题标题】：display the li tags to the middle part of a div tag将 li 标签显示到 div 标签的中间部分
【发布时间】：2011-12-24 21:35:13
【问题描述】：

我一直在审查将元素定位到 div 标签中间部分的不同解决方案：

<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 这里是它在网站上的样例截图：

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

提前致谢。

【问题讨论】：

margin:auto 无法工作，因为未设置宽度（我认为），您可以为显示的仪表数量添加不同的类吗？像
会显示 3？如果是这样，我想我可以提供帮助

标签： css html position center

【解决方案1】：

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

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

【讨论】：

是的，当浏览器不支持 html5 时，插件会自动工作，它会将标签转换为与其早期版本兼容的东西，仪表实际上是由插件生成的。 :)
请记住，这种技术在 IE7 中存在缺陷。它适用于默认内联的元素，但不幸的是列表项默认是块级的。

【解决方案2】：

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

.course_description_block {
    margin: auto;
}

div 中的文本可以使用普通的 text-align: center 来定位。

【讨论】：