با ادب و احترام
به پیوست تصویر مربوطه با تغییر در بخش index.html
جایگزینی Div بجای span این بخش از برنامه تغییری نکرد.
<section id="counters">
<div class="container">
<div class="counter">
<div class="counters-item">
<i class="fa fa-shopping-cart" aria-hidden="true"></i>
<div class="counter">20000</div>
<h5>محصولات</h5>
</div>
<div class="counters-item">
<i class="fa fa-user" aria-hidden="true"></i>
<div class="counter">95400</div>
<h5>مشتری</h5>
</div>
<div class="counters-item">
<i class="fa fa-search" aria-hidden="true"></i>
<div class="counter">38250</div>
<h5>اعضا</h5>
</div>
</div>
</div>
</section>/*counters*/
#counters{
width: 100%;
background-color: #9ac0fc;
padding: 120px 0;
}
#counters .counter{
width: 100%;
display: flex;
}
#counters .counter .counters-item{
width: 33%;
text-align: center;
}
#counters .counter .counters-item svg{
font-size:40x;
}
سلام
چون قالبتون رو ندیدم اما نمیتونم بگم تغییری توی کدهای خودتون بدین
اما این رو جایگزین کد خودتون کنین
#counters .counters .counters-item {
width: 25%;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
البته هنوز به بعضی از این پروپرتی ها نرسیدین توی دوره اما الان اشنا شین هم چیز بدی نیست
display: flex این باعث میشه المان های زیر مجموعه کنار هم بشینن
flex-direction: column; این باعث میشه همون المان ها زیر هم ردیف شن
بقیه هم وسط چین میکنن
سپاس
فقط این رو تغییر دادم درست شد. flex-direction: column-reverse;