Problem, divs korrekt auszurichten, wenn die Bildschirmgröße reduziert wird

Question

Ich habe eine Infoleiste auf der Seite angezeigt, die auf 76% der vollen Bildschirmbreite eingestellt ist, bei 1278px Breite (native Größe auf meinem Macbook) Dieses div muss zentriert sein, so dass es direkt über einem Karussell sitzt. Die Infoleiste enthält drei Divs, von denen jedes ein Symbol und dann einen Text enthält. Das Problem, das ich habe, ist, dass wenn die Bildschirmbreite reduziert wird, der Text unter das Symbol fällt, während ich möchte, dass der gesamte Inhalt verkleinert wird und der Gesamtabstand beibehalten wird, so dass er immer mit dem darunter liegenden Karussell ausgerichtet ist. Sobald der Bildschirm die Smartphone-Größe erreicht, wird die Informationsleiste vertikal gestapelt. (Medien-Abfrage Größe noch festgelegt werden, sondern beispielsweise Größe verwendet hier) 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 
    } 
} 

Ich habe eine Geige zeigt den aktuellen CSS und HTML-Code verwendet einrichten. (Beachten Sie, ich habe eine Schriftgröße hinzuzufügen, hatte viel kleiner als wirklich so verwendet, dass es auf jsfiddle in einer einzigen Zeile zeigt

Fiddle bei https://jsfiddle.net/4auh8zn5/1/

Answer 1

gefunden Sie es mit Flexbox lösen können.

Ihre .info in CSS dies ändern:

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

Wenn Sie besser Ihr Symbol zu positionieren, können Sie auch diesen Code hinzu:

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

jsfiddle hier: https://jsfiddle.net/4auh8zn5/2/

Hoffe, es hilft!