Как можно выровнять изображение так, чтобы оно всегда находилось по центру текста?

1. Для выравнивания изображения по центру текста можно использовать CSS свойство `text-align: center;` для родительского элемента, содержащего как текст, так и изображение. Например:

```css
.parent-container {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
```

2. Чтобы убрать пробел между фоновым изображением и текстом внутри элемента, можно использовать свойство `background-size: cover;` для элемента с фоновым изображением. Например:

```css
.flex-center {
  background-image: url('your-image-url.jpg');
  background-size: cover;
}
```

Это свойство позволяет масштабировать фоновое изображение таким образом, чтобы оно полностью заполняло заданный элемент, не оставляя пробелов между изображением и текстом.

У меня вот получилось, интересно теперь как убрать  чтобы не развалилось, подскажите? <br/> <br/> <pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Изображение&lt;/title&gt;
  &lt;style&gt;
  html {
	width: 200px;	
}
.flex-center {
    display: flex;
	align-items: center;
	gap: 15px;
}
.img:before {
content: ""; 
	background: url(/site/user/questionnaire/images/time.svg) no-repeat;
	background-position: center;
    display: flex;
	align-items: center;
    width: 17px; 
    height: 17px; 
	margin: 0; 
	padding: 0;
	background-size: contain;	
	
}


  &lt;/style&gt;
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div class="flex-center"&gt;
 &lt;i class="img"&gt;&lt;/i&gt;
 
 &lt;p&gt;
  &lt;span style="display: block;"&gt;1&lt;/span&gt;
  &lt;span style="display: block;"&gt;2&lt;/span&gt;
  &lt;span style="display: block;"&gt;3&lt;/span&gt;
  &lt;span style="display: block;"&gt;4&lt;/span&gt;
  &lt;/p&gt;
  
&lt;/div&gt;








 &lt;/body&gt;
&lt;/html&gt;</code></pre> <br/>