如何在CSS中創建的框下對齊文本

Question

我最近編寫了一個關於html和CSS的更多信息。截至目前，我沒有使用任何JavaScript。

現在，我有一個問題，因爲我跟着一個psd文件，我需要把它變成一個html。我需要製作一個灰盒子，在那個盒子的正下方，我需要一個小標題和一個段落，< p> < h4>。看下面的圖片。

.boxes{ 
 
    width: 500px; 
 
     background-color: #e6e6e6; 
 
    display: block; 
 
    height: 130px; 
 
    width: 230px; 
 
    color: white; 
 
    text-align: center; 
 
    padding: .10em; 
 
    margin: 2em; 
 
    border: double #fff 20px; 
 
    border-bottom: none; 
 
} 
 

 
.non-icons { 
 
    margin: 15%; 
 
} 
 

 
.box_text{ 
 
color: #8c8b8b; 
 

 
}

<div class="container"> 
 
    <div class="four columns"> 
 
     <div class="boxes"> 
 
      <i class="fa fa-desktop fa-4x non-icons"></i> 
 
     </div> 
 
    <h4 class="box_text"> Web Design</h4> 
 
    </div> 
 
    <div class="four columns"> 
 
     <div class="boxes"> 
 
      <i class="fa fa-shopping-basket fa-4x non-icons"></i> 
 
     </div> 
 
    </div> 
 
    <div class="four columns"> 
 
     <div class="boxes"> 
 
      <i class="fa fa-signal fa-4x non-icons"></i> 
 
     </div> 
 
    </div> 
 
</div> <!-- End of Container -->

這看起來在普通視圖很好，但是當屏幕縮小它打破。

請幫助..

感謝， Devansh

Answer 1

你想設計什麼叫grid。爲不同屏幕尺寸自動調整大小的網格是Bootstrap發明的。

這W3Schools的例子可以幫助你（添加定價集裝箱爲例）：

http://www.w3schools.com/bootstrap/bootstrap_theme_company.asp#myCarousel2

此外，閱讀這部分關於網格系統是如何工作的。

http://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

Answer 2

電網作出響應的佈局很好地工作。或者嘗試用百分比（％）代替像素或ems這樣的明確單位。這將使你的佈局更加流暢。

Bootstraps網格系統很好。

Flexbox也是一個不錯的選擇。 http://www.w3schools.com/css/css3_flexbox.asp

您還有2 width屬性.boxes這是令人困惑的事情。

Answer 3

粗，如果你不擅長與引導，你可以「傑裏鑽機」的方式：

div{ 
    width:30%; 
    overflow:hidden; 
    height:250px; 
    display:inline-block; 
} 

然後你把div的元素，它會排隊。粗糙的你可以改變寬度和高度。確保圖像尺寸/縮放尺寸相同，並且具有相同的填充/邊距，因此看起來不錯且均勻。

此外，你應該考慮閱讀一篇關於爲什麼PSD轉換爲HTML的文章。