Question

我有一些浮动的div，我不能使用display：inline-block，因为其中一些div是jqxSwitchButtons并且使用内联块会使这些按钮周围的一切变得混乱。

Here是一个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>

有什么建议吗？

Answer 1

使用CSS集中事物的正确方法是margin-left：auto;保证金权：汽车;.但由于您已经更改了这些div的边距，我建议使用折旧的<center></center> HTML标记。即使它在几年前被折旧，它仍然可以在现代浏览器中使用。我不确定是否有任何浏览器计划在将来的版本中删除中心标记。

Answer 2

Hello Cyborgx37和mitchelltrout！最后，我根据媒体查询在容器div上设置了固定宽度，因此对于不同的分辨率我设置了不同的宽度，所以我可以将所有对齐在一行中。再次感谢大家的帮助。 Ciao，Luigino

将一些没有宽度的浮动div对中

2 个答案: