中心兩個DIV縮小並安裝在一個新的線中

Question

我有4個DIVs裝在一個寬度爲50％的左邊，並且左邊是浮動的，所以它們中的兩個適合排成一行。他們必須有一個最小寬度，所以內容可以完全顯示。當我使頁面變小時，我只剩下一行（這是我想要的），但它不再居中......

我希望那些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/的例子。請注意，您將不得不放大結果部分，以便查看變化/