0

我有一些无法使用 display: inline-block 的浮动 div，因为其中一些 div 是 jqxSwitchButtons 并且使用该 inline-block 会弄乱这些按钮周围的一切。

这是一个 JSFiddle 示例，其中我评论了一些 jqxSwitchButtons 行，我想将这些 div 居中。

来自 JSFiddle 的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
    <center>
            <table style="padding:1px;margin:1px;color:#00417B;font-size:12px;border:2px solid #525252;border-collapse: collapse;background-color:white;width: 100%;" border=1>
            <tr><td>
            <div style="display: block; align:center; width: 100%; margin-left: auto; margin-right: auto; padding-right: auto; padding-left: auto; text-align: center;">

            <div style="float: left; margin-top: 5px; font-weight: bold; ">Element 1</div>
            <div><div style="float: left; margin-left: 5px; margin-right: 5px; margin-top: 2px; margin-bottom: 2px; border: 0.1em solid green; width: 10px; height: 21px;"><div id="element_1" style="float: left;"></div></div></div> <!-- jqxSwitchButton -->

            <div style="float: left; margin-top: 5px; font-weight: bold; ">Element 2</div>
            <div><div style="float: left; margin-left: 5px; margin-right: 5px; margin-top: 2px; margin-bottom: 2px; border: 0.1em solid green; width: 10px; height: 21px;"><div id="element_2" style="float: left;"></div></div></div> <!-- jqxSwitchButton -->

            <div style="float: left; margin-top: 5px; font-weight: bold; ">Element 3</div>
            <div><div style="float: left; margin-left: 5px; margin-right: 5px; margin-top: 2px; margin-bottom: 2px; border: 0.1em solid green; width: 10px; height: 21px;"><div id="element_3" style="float: left;"></div></div></div> <!-- jqxSwitchButton -->

            <div style="float: left; margin-left: 1px">|</div>

            <div style="float: left; margin-left: 2px"><input type="button" id="btnCompute" value="Compute" onClick="Compute()" style="margin-top: 4px"></div>

            <div style="float: left; margin-left: 1px">|</div>

            <div style="float: left; margin-top: 5px; margin-left: 2px; font-weight: bold; ">Auto-compute</div>
            <div><div style="float: left; margin-left: 5px; margin-right: 5px; margin-top: 2px; margin-bottom: 2px; border: 0.1em solid green; width: 10px; height: 21px;"><div id="recompute" style="float: left;"></div></div></div> <!-- jqxSwitchButton -->

            <div style="float: left; margin-top: 5px; margin-left: 2px; font-weight: bold; "><input type="checkbox" name="chkAutoRecompute" id="chkAutoRecompute" value="0" style="display: none" ></div>

            </div>

            </td></tr>

            </table>
    </center>
</body>
</html>

有什么建议么？

4

2 回答 2

0

使用 CSS 使事物居中的正确方法是 margin-left: auto; 边距右：自动；。但是由于您已经更改了这些 div 的边距，因此我建议您使用折旧的<center></center>HTML 标记。即使几年前已经贬值，它仍然可以在现代浏览器中使用。我不确定是否有任何浏览器计划在未来版本中删除中心标签。

于 2013-02-07T16:15:39.920 回答
0

你好 Cyborgx37 和 mitchelltrout！最后，我解决了在容器 div 上使用固定宽度根据媒体查询正确设置的问题，因此对于不同的分辨率，我设置了不同的宽度，这样我就可以在一行中对齐。再次感谢大家的帮助。乔，路易吉诺

于 2013-02-20T08:33:47.673 回答