Как реализовать? Бутстрап?

Question

[Виктор Кокорич]

Как сделать так, чтобы текст стал выше?
Текст не отодвигается, а удлиняет полностью объект.

<section class="number">
           <div class="container">
                <div class="row">
                        <div class="col">
                           <div class="chert">
                               <img src="../site/png/project.png" alt="чертеж">
                               <div class="count">40+</div>
                           </div>
                        </div>
                         <div class="col">
                           <div class="chert">
                               <img src="../site/png/project.png" alt="чертеж">
                           </div>
                        </div>
                        <div class="col">
                           <div class="chert">
                               <img src="../site/png/project.png" alt="чертеж">
                           </div>
                        </div>
                        <div class="col">
                           <div class="chert">
                               <img src="../site/png/project.png" alt="чертеж">
                           </div>
                        </div>
                        <div class="col">
                           <div class="chert">
                               <img src="../site/png/project.png" alt="чертеж">
                           </div>
                        </div>
                        <div class="col">
                           <div class="chert">
                               <img src="../site/png/project.png" alt="чертеж">
                           </div>
                        </div>
                  </div>
            </div> 
        </section>

.number {
    background-color: #34547A;

    height: 250px;
    padding-top: 100px;
    }


.count {
    font-family: Roboto;
    font-style: normal;
    font-weight: 500;
    font-size: 21px;
    line-height: 25px;
    display: inline-block;
    color: #FFFFFF;
    margin-left: 20px;
    padding-bottom: 60px;
    margin-bottom: 30px;
    
    
    

}

.chert {
    text-align: center;
    padding: 1px 1px 1px 1px;
}

Comments

[Mesuti]

margin-top: -20px

[Виктор Кокорич]

Mesuti, не работает

[Mesuti]

Виктор Кокорич,
Работает :)
Создал за Вас песочницу:

[Ankhena]

Читайте Раз­би­ра­ем­ся с vertical-align
Либо через флекс для chert.

И нужно понимать, зачем у вас заданы padding-bottom: 60px; и margin-bottom: 30px;.
Похоже на написание кода методом тыка.

P.s. эти иконки это не контентные изображения. Они вставляются через CSS, фоном и/или псевдоэлементом.
В крайнем случае им задают aria-hidden="true".

Answer 1

[Владислав Кречун]

Добавляешь класс align-top блоку div с классом count

<div class="col">
     <div class="chert">
       <img src="red.png" alt="чертеж">
         <div class="count align-top">40+</div>
       </div>
  </div>

Подробнее сдесь : https://getbootstrap.com/docs/5.0/utilities/vertic...
P. S: А еще классу count можно убрать если не нужны

padding-bottom: 60px;
margin-bottom: 30px;