Html 一次最多浮动两个居中div，如果页面较小或在移动设备上，该div会自动流到另一个上方

我试图找到一种方法，一次最多浮动两个居中div，如果页面很小或在移动设备上，它会自动流到另一个上方。 换句话说，一行中最多有2个项目，如果屏幕很小或大部分在移动设备上，则每行将有1个项目

我设法把所有的事情都做完了，除了把所有的div都居中

您也可以在这里查看下面的代码

我已将

更改为

，现在它处于中心位置，但我认为这不是正确的解决方案。或者，我在本页找到了此

[但不知道如何应用它。它已经做到了这一点，只需缩小您的浏览器；当浏览器宽度小于两个div的宽度时，方框将折叠。但是，如果不是这样，当窗口达到“x”宽度时，您可以使用媒体查询清除每个div的浮动。

<div style="width: auto; margin: auto;">
<div style="float: left;">
<h2 style="text-align: center;"><strong><a title="top left" href="http://topleft">top left</a></strong></h2>
<p style="text-align: center;"><strong><a href="http://toleft/"><img class="aligncenter size-medium wp-image-20" title="top left" src="" alt="" width="250" height="250" /></a>
</strong></p>
</div>

<div style="float: left;">
<h2 style="text-align: center;"><strong><a title="top right" href="http://topright">top right</a></strong></h2>
<p style="text-align: center;"><strong><a href="http://topright"><img class="aligncenter size-medium wp-image-20" title="top right" src="" alt="" width="250" height="250" /></a>
</strong></p>
</div>

<div style="clear: both;"> </div>

<div style="width: auto; margin: auto;">
<div style="float: left;">
<h2 style="text-align: center;"><strong><a title="bottom left" href="http://bottomleft/">bottom left</a></strong></h2>
<p style="text-align: center;"><strong><a href="http://bottom left"><img class="aligncenter size-medium wp-image-20" title="bottom left" src="" alt="" width="250" height="250" /></a>
</strong></p>
</div>

<div style="float: left;">
<h2 style="text-align: center;"><strong><a title="bottom right" href="http://bottomright/">bottom right</a></strong></h2>
<p style="text-align: center;"><strong><a href="http://bottom right"><img class="aligncenter size-medium wp-image-20" title="bottom right" src="" alt="" width="250" height="250" /></a>
</strong></p>

</div>
</div>
</div>