Question

我想在页面中添加信息栏。它包含三个水平对齐的div，所有内容当前都在其中浮动。我正在尝试使中心div对齐中心的内容和右手div对齐，但我尝试的任何东西似乎都没有用。

我已尝试将text-align:center添加到#delivery和text-align:right添加到#quickshop，我也尝试float:right #quickshop但他们没有效果。

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>

我在这里设置了一个小提琴，以便您可以看到问题的真实示例：https://jsfiddle.net/qafru72o/2/

我到底哪里错了？

Answer 1

从text-align:left;移除#container .text-area，然后将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>

这就是你需要的吗？

设置div内容对齐的问题

1 个答案: