居中一些没有宽度的浮动div

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

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>

有什么建议？

来源

2013-02-07 Luigino

首先验证您的html代码（http://validator.w3.org/check可能会帮助您）。然后尝试使用内的div，并使用属性display：block; margin：0px auto; float：none; （垂直边距你喜欢多少像素） – w3jimmy

你好Cyborgx37和mitchelltrout！最后，我解决了使用固定宽度的容器div设置，具体取决于媒体查询，因此对于不同的分辨率，我设置了不同的宽度，以便我可以将所有对齐排成一行。再次感谢所有人的帮助。 Ciao，Luigino

来源

2013-02-20 08:33:47 Luigino

以CSS为中心的正确方法是margin-left：auto;保证金权：汽车;.但既然你已经改变了这些divs的利润率，我会建议使用折旧的<center></center> HTML标签。它仍然可以在现代浏览器中运行，即使它在几年前已经贬值。即时通讯不确定是否有任何浏览器计划在未来的版本中删除中心标签。

来源

2013-02-07 16:15:39 mitchelltrout

我认为你的意思是“[deprecated]”（http://en.wikipedia.org/wiki/Deprecation）“;） – JDB

根据定义，不推荐使用不推荐使用的HTML元素。即使它“有效”，它可能在所有浏览器（手机等）中的工作方式都不同，并可能在未来的任何时间失去支持。外包装div将是可取的。 – JDB

哦，我没有注意到你已经使用中心标记 – mitchelltrout

居中一些没有宽度的浮动div

回答

相关问题