html - 设置 div 内容对齐的问题

Question

我想在页面上添加一个信息栏。它包含三个水平对齐的 div，所有内容当前都在其中向左浮动。我试图使中心 div 的内容居中对齐，右侧的 div 向右对齐，但我尝试的任何操作似乎都不起作用。

我已经尝试将 text-align:center 添加到 #delivery 并将 text-align:right 添加到 #quickshop 并且我还在 #quickshop 上尝试了 float:right 但它们根本没有效果。

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>

我在这里设置了一个 fiddle ，这样您就可以看到问题的真实示例:https://jsfiddle.net/qafru72o/2/

我究竟哪里出错了？

Answer 1

从 #container .text-area 中删除 text-align:left;，然后将 justify-content 添加到每个单独的 div。

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

这是你需要的吗？