因爲屏幕尺寸減小而使div正確對齊的問題

Question

當在1278px寬（我的macbook上的本機尺寸）上查看時，我在頁面上顯示的信息欄設置爲全屏寬度的76％ 此div必須居中，以便它直接位於轉盤上方。 信息欄包含三個div，每個包含一個圖標，然後是一些文本。我遇到的問題是，隨着屏幕寬度的減小，文字會落到圖標下方，而我希望整個內容的尺寸縮小並保持整體間距，以便它始終與下方的傳送帶對齊。一旦屏幕達到智能手機尺寸，它會垂直堆疊信息欄。 （媒體查詢大小尚未確定，但在這裏使用例如大小） HTML

<div id="info-bar"> 
<div id="container"> 
<div id="quickquotes" class="info"> 
<i class="icon-quote"></i> 
<div class="text-area"> 
Quick Quote Fast Response</div> 
</div> 

<div id="delivery" class="info"> 
<i class="icon-delivery"></i> 
<div class="text-area"> 
Free UK Delivery on Orders Over £100</div> 
</div> 

<div id="quickshop" class="info"> 
<i class="icon-quickshop"></i> 
<div class="text-area"> 
Quick Shop Search Product Codes</div> 
</div> 
</div> 
</div> 

CSS

#info-bar{ 
background:#fff; 
} 
#container{ 
margin-right: auto; 
margin-left: auto; 
width:76%; 
} 
.info{ 
float:left; 
width:38.5%; 
margin:0; 
padding: 9px 0; 
font-size:0.4em; 
} 
#quickquotes.info{ 
width:30.5%; 
} 
#quickshop.info{ 
width:31%; 
} 
#container i { 
font-size: 34px; 
color: #a6d120; 
display: inline-block; 
vertical-align: middle; 
} 
.icon-quote:before { 
content: url("http://dev.doorentrydirect.com/includes/templates/ded_responsive/images/info-quote.png"); 
} 
.icon-delivery:before { 
content: url("http://dev.doorentrydirect.com/includes/templates/ded_responsive/images/info-delivery.png"); 
} 
.icon-quickshop:before { 
content: url("http://dev.doorentrydirect.com/includes/templates/ded_responsive/images/info-quickshop.png"); 
} 
#container .text-area { 
display: inline-block; 
vertical-align: middle; 
text-align: left; 
margin-left: 0px; 
color:#1e3e57; 
letter-spacing:0.07em; 
font-weight:bolder; 
text-transform:uppercase; 
font-size:1.1em; 
} 
@media only screen and (max-width: 40em) { 
    .info,#quickquotes.info,#quickshop.info { 
    float:none; 
    width:100%; 
    margin-bottom:5px 
    } 
} 

我已經設置了顯示當前使用的CSS和HTML代碼中的小提琴。 （請注意，我不得不添加字體大小遠遠小於真正使用，使其在顯示上的jsfiddle單行

小提琴在https://jsfiddle.net/4auh8zn5/1/

Answer 1

發現你可以用Flexbox的解決這個問題。

在CSS改變你的.info這樣：

.info{ 
    float:left; 
    width:38.5%; 
    margin:0; 
    padding: 9px 0; 
    font-size:0.4em; 
    display:flex; 
    flex-wrap: nowrap; 
    align-items: center; 
} 

如果你想更好地定位你的圖標，你也可以添加以下代碼：

#container i:before { 
    position:relative; 
    top:4px; 
} 

的jsfiddle這裏：https://jsfiddle.net/4auh8zn5/2/

希望它能幫助！