Probleme Einstellung div Inhalt Ausrichtung

Question

Ich möchte eine Infoleiste zu einer Seite hinzufügen. Es enthält drei divs, die horizontal ausgerichtet sind, und der gesamte Inhalt schwebt derzeit links in ihnen. Ich versuche, den Inhalt des Center Div Align Center und der rechten Div ausrichten auf der rechten Seite, aber nichts, was ich versuche scheint zu arbeiten.

Ich habe versucht, das Hinzufügen text-align:center-#delivery und text-align:right zu #quickshop und ich versuchte auch float:right auf #quickshop aber sie haben überhaupt keine Wirkung.

HTML/CSS:

#info-bar { 
 
    height: 46px; 
 
} 
 
#container { 
 
    margin: 0 auto; 
 
    width: 82%; 
 
} 
 
.info { 
 
    float: left; 
 
    width: 37.5%; 
 
    margin: 0; 
 
    padding: 9px 0; 
 
    display: flex; 
 
    flex-wrap: nowrap; 
 
    align-items: center; 
 
} 
 
#quickquotes.info { 
 
    width: 28.5%; 
 
} 
 
#quickshop.info { 
 
    width: 34%; 
 
} 
 
#container i { 
 
    font-size: 34px; 
 
    color: #a6d120; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
} 
 

 
#container i:before { 
 
    position: relative; 
 
    top: 0px; 
 
} 
 
.icon-quote:before { content: url("http://placehold.it/35x27"); } 
 
.icon-delivery:before { content: url("http://placehold.it/35x27"); } 
 
.icon-quickshop:before { content: url("http://placehold.it/35x27"); } 
 

 
#container .text-area { 
 
    display: inline-block; 
 
    text-align: left; 
 
    margin-left: 0px; 
 
    color: #1e3e57; 
 
    letter-spacing: 0.07em; 
 
    font-weight: bolder; 
 
    text-transform: uppercase; 
 
    font-size: 0.8em; 
 
}

<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>

Ich habe hier eine Geige eingerichtet, so dass Sie ein reales Beispiel des Problems sehen: https://jsfiddle.net/qafru72o/2/

Wo auf der Erde gehe ich hier falsch?

Answer 1

#info-bar{ 
 
height: 46px; 
 
} 
 
#container{ 
 
margin:0 auto; 
 
width:82%; 
 
} 
 
.info{ 
 
float:left; 
 
width:37.5%; 
 
margin:0; 
 
padding: 9px 0; 
 
display:flex; 
 
flex-wrap: nowrap; 
 
align-items: center; 
 
} 
 
#quickquotes.info{ 
 
width:28.5%; 
 
justify-content: flex-start; 
 
} 
 
#quickshop.info{ 
 
width:34%; 
 
justify-content: flex-end; 
 
} 
 
#delivery.info{ 
 
justify-content: center; 
 
} 
 
#container i { 
 
font-size: 34px; 
 
color: #a6d120; 
 
display: inline-block; 
 
vertical-align: middle; 
 
} 
 

 
#container i:before { 
 
    position:relative; 
 
    top:0px; 
 
} 
 
.icon-quote:before {content: url("http://placehold.it/35x27");} 
 
.icon-delivery:before {content: url("http://placehold.it/35x27");} 
 
.icon-quickshop:before {content: url("http://placehold.it/35x27");} 
 

 
#container .text-area { 
 
display: inline-block; 
 
margin-left: 0px; 
 
color:#1e3e57; 
 
letter-spacing:0.07em; 
 
font-weight:bolder; 
 
text-transform:uppercase; 
 
font-size:0.8em; 
 
}

<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>

ist es das, was Sie brauchen?