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

Question

Тиграм

html , css

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

Какие изменения следует внести в CSS селектор `.flex-center`, чтобы убрать пробел между фоновым изображением и текстом внутри элемента?

5 мая 2024 г. 17:30

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

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

Answer 1

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;
}
```

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

Answer 2

У меня вот получилось, интересно теперь как убрать  чтобы не развалилось, подскажите? 
 
 <!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Изображение</title>
  <style>
  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;	
	
}


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








 </body>
</html>