@yoyoyooyoyoyoyoyoyoyoyoyo

Как сделать текст в центре адаптивной круглой картинки?

Имеется 2 колонки на бутстрапе, в правой колонке картинка (круг), в которой должен быть текст. Никак не получается сверстать так, чтобы присутствовала адаптивность для картинки круга с текстом при скукоживании окна браузера.
В скриншоте пример того, как должно быть.
60364e3fc9498920332221.jpeg
  • Вопрос задан
  • 80 просмотров
Пригласить эксперта
Ответы на вопрос 2
SuperZombi
@SuperZombi
Либо в img указать align
align="bottom"
либо vertical-align

Второй вариант это сделать position
position: absolute;
или position: relative;
Ответ написан
@lolzqq
HTML,CSS,JS,PHP
<div class="ratio ratio-1x1" style="border: 5px solid black; border-radius:50%">
      <div class="ratio ratio-1x1" style="border: 5px solid white; border-radius:50%">
            <div class="ratio ratio-1x1" style="border: 5px solid black; border-radius:50%">
                  .... содержимое круга
            </div>
      </div>
</div>


Размер круга будет зависеть от ширины родителя, в котором он размещён.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы