我想在页面上添加一个信息栏。它包含三个水平对齐的 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/
我究竟哪里出错了?
最佳答案
从 #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>
这是你需要的吗?
关于html - 设置 div 内容对齐的问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40371543/