Как центрировать изображение относительно текста?

Question

Викентий

html , css , php

Как центрировать изображение относительно текста?

Как можно настроить CSS для создания изображения, которое будет центрировано на странице и обернуто текстом внутри блока flex?

5 мая 2024 г. 6:40

Ответы на вопрос 2

Похожие вопросы

Answer 1

Чтобы центрировать изображение относительно текста внутри блока flex, вы можете использовать следующий CSS:

```css
.container {
  display: flex;
  align-items: center;
}

img {
  margin-right: 10px; /* отступ между изображением и текстом */
}
```

HTML-код будет выглядеть примерно так:

```html
<div class="container">
  <img src="image.jpg" alt="Image">
  <p>Текст, который будет обернут вокруг изображения.</p>
</div>
```

С помощью этих стилей изображение будет центрировано относительно текста, и текст будет обтекать изображение в блоке flex.

Если вы хотите обтекание текстом по всему блоку, а не только справа от изображения, вы можете использовать `flex-direction: row-reverse;` в CSS классе `.container`:

```css
.container {
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}
```

Этот вариант позволит тексту обтекать изображение справа и снизу.

Answer 2

.flex-center { 
  background-image: url(/site/user/questionnaire/images/time.svg);
  background-repeat: no-repeat;
  background-position: right center;
}