Как разместить изображение сверху и по центру от текста?

Question

[osimone]

не получается разместить картинку сверху от текста, прошу помочь

Comments

[lUser L]

Никогда не используйте скрин для демонстрации кода, лучше залейте в песочницу

Answer 1

[approximate solution]

Используйте flex для выравнивая контента, ты центрирования блока по вертикали\горизонтали: justify-content: center, align-items: center
Если вы хотите что бы вам помогли с реализацией кода - сам код заливайте на codepen, и скидывайте дизайн блока на всех устройствах, если у вас адаптив.

Comments

[osimone]

<section class="feed">
            <div class="container">
                <div class="tittle">отзывы клиентов</div>
                    <div class="feed__first">
                        <img src="img/irina.png" alt="irina" class="feed__img">
                        <div class="feed__text">
                            <div class="feed__subtitle">Ирина Иванченко</div>
                            <div class="feed__count">2 полумарафона</div>             
                            <div class="feed__descr">Не знала, что себе купить - обратилась к ребятам из RunSmart - подобрали пульсометр, который подошёл именно под мои цели и финансовые возможности.
                                Через некоторое время решила обновить гаджет - не раздумывая обратилась туда же.
                                <br><br>
                                
                                Новые цели - новый гаджет!
                                <br><br>
                                Спасибо, RunSmart!    
                        </div>           
                    </div>

css

.feed {
    padding-bottom: 71px;
    &__first {
        margin-top: 100px;
        &:nth-child(2) {
            margin-top: 70px;
        }
   }
    &__img {
        float: left;
        width: 169px;
        height: 169px;
        margin-right: 60px;
    }   
    &__text {
        margin-left: 62px;
        padding-right: 60px;
    }
    &__subtitle {
        font-size: 18px;
        font-weight: 700;
        color: #0d0d0d;
    }
    &__count {
        font-size: 14px;
        line-height: 1.2;
        font-weight: 500;
        color: #646464;
    }
    &__descr {
        margin-top: 10px;
        font-size: 16px;
        line-height: 1.2;
        font-weight: 300;
        color: #0d0d0d;
    }

}

дизайна блока нету, сам пытаюсь сделать, но не получается круглое изображение разместить над текстом

[approximate solution]

osimone, в paint хотя бы нарисуйте расположение блоков в 3х состояниях. Desktop, table, mobile. Делается за минуту, покажите местоположение текста, картинки.

[osimone]

я хочу сделать изображение над текстом если разрешение экрана максимум 767px
мне просто нужно понять какое свойство позволит это сделать

попробовал ваш вариант, не получается

[approximate solution]

osimone, свой telegram напишите.

[osimone]

approximate solution,
вот здесь хочу расположить

[osimone]

approximate solution, telegram: osimone

[approximate solution]

osimone, Сделайте дополнительную обертку для вашей картинки и текста.
feed__wrapper > в нем 2 блока дочерних
feed__image
feed__description

Далее вы прописываете max-width 768px, и feed-wrapper > display:flex; flex-direction: column. Ваши 2 блока выстроятся как Вам нужно, и align-items: center для выравнивания по горизонтали.

Answer 2

[aiil_ako]

Изображение оберните в другой слой. Например feed__image. А потом такой css

.feed__image {
display:table-cell;
vertical-align:middle;
}
 .feed__text {
display:table-cell;
vertical-align:middle;
}

Решение кроссбраузерно.