因为屏幕尺寸减小而使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/

希望它能帮助！