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

Рейтинг: 0Ответов: 2Опубликовано: 12.06.2023

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

<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;
}
css html bootstrap
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

Обернул тексты в div

Обернул тексты в 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>

▲ 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>