Текст возле лого

Question

Подскажите пожалуйста как расположить текст по середине картинки - как дополнение к лого (обтекание что-ли)

<div class="logo">
   <img src="img/logo.png" alt="logo" id="foo" class="rounded-circle">
   <p class="fw-bold ">Test1</p>
   <p class="fw-bold text-danger">Test2</p>
</div>

.logo {
    margin-left: 20px;
}

#foo {
    width: 64px;
    height: 64px;
    border: 2px solid red;
}

Answer 1

С конкретной настройкой придется немножко повозится. Но основное решение заключается в добавлении shape-outside — свойство которое задает различные формы при обтекании. Для размещения текста я использовал br исключительно для простоты (как и спаны вместо параграфов), и размеры увеличил чтобы был заметен эффект.

.logo {
   margin-left: 20px;
}

#foo {
   float:left;
   shape-outside: circle(50%);
   width: 100px;
   height: 100px;
   border: 2px solid red;
   border-radius: 50%
}

<div class="logo">
   <img src="img/logo.png" alt="logo" id="foo" class="rounded-circle">
   <br>
   <br>
   <span class="fw-bold ">Test1</span>
   <br>
   <span class="fw-bold text-danger">Test2</span>
</div>

Answer 2

Обернул тексты в div. Но на сколько это правильно?

.logo {
    margin-left: 20px;
    margin-top: 8px;
}

#foo {
    width: 64px;
    height: 64px;
    border: 2px solid red;
}
.text1 {
    margin-left: 70px;
    margin-top: -50px;
}
.text2 {
    margin-left: 70px;
    margin-top: -25px;
}

<img src="img/logo.png" alt="logo" id="foo" class="rounded-circle">
  <div class="text1 d-flex">
    <p class="fw-bold ">Test1</p>
  </div>
  <div class="text2 d-flex">
    <p class="fw-bold text-danger">Test2</p>
  </div>

БЛОГ НА HUSL

Текст возле лого

Ответы (2 шт):