html - 缩小并安装在新行中时将两个 DIV 居中

Question

我有 4 个 DIV 排成一行，宽度为:50% 并且向左浮动，以便其中两个可以排成一行。它们必须有一个最小宽度，这样内容才能完整显示。当我缩小页面时，我只剩下一行中的一个 div(这是我想要的)但它不再居中......

我希望这些 DIV 始终居中!谁能帮帮我？

HTML代码:

    <div class="row">
                <div class="app-screen-div">
                    <div class="app-screen">
                        <img src="images/deal_list.png" alt="Deal Liste">
                    </div>
                </div>
                <div class="app-screen-div">
                    <div class="app-screen">
                        <img src="images/code_scan.png" alt="Scan">
                    </div>
                </div>
                <div class="app-screen-div">
                    <div class="app-screen">
                        <img src="images/deals_begonnen.png" alt="Started Deals">
                    </div>
                </div>
                <div class="app-screen-div">
                    <div class="app-screen">
                        <img src="images/enter_deal.png" alt="Enter Deal">
                    </div>
                </div>
            </div>

CSS:

    .row {
margin:auto;
padding:auto;
}

    .app-screen-div{
float:left;
width:50%;
min-width:280px;
margin:auto;
text-align: center;
position: relative;
}

    .app-screen{
border-style:solid;
border-radius:5px;
padding: 1px;
border: 1px solid grey;
background-color:#ff5253;
width:280px;
margin:auto;
}

    .app-screen > img {
display: block;
max-width: 100%;
height: auto;
}

谢谢!

Answer 1

解决方案是使用 display: inline-block 而不是 float: left 并且我使用了 text-align: center。查看 http://jsfiddle.net/rqh0ompa/4/ 中的示例.请注意，您必须将结果部分放大很多才能看到变化/