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

@Andrey69 · Регистрация: 06.08.2017

Студворк — интернет-сервис помощи студентам

Помогите спозиционировать текст СТРОГО по центру изображения

HTML5
1
<span><img src="Sjed.png" width="36" height="36" hspace=5 alt="Грибы" align="middle" />&nbsp;Грибы</span>

@Kven-M · 19.08.2017, 22:06

Я бы попробовал использовать padding к самому изображению, тем самым выравнивания текст.

@Andrey69 · 19.08.2017, 22:16 **[ТС]**

А что ВЫ сможете предложить?))

@Kven-M · 19.08.2017, 22:23

Хотя я наверное ошибся, лучше попробовать применить padding к span, например:

CSS
1
2
3
span {
    padding: 5px 0 2px 0;
}

@Denno · 19.08.2017, 22:43

Если что, то я без году неделю изучаю веб-программирование, можно так сказать.
Я, как новичок, и то понимаю, что ваш стиль и кусок этой маленькой разметки - это просто ужас полнейший.

Я бы сделал вот так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<style>
div img{
    vertical-align: -12px;
}
span {
    padding-left: 5px;
}
</style>
<div>
    <img src="Sjed.png" width="36" height="36" alt="Грибы">
    <span>Грибы</span>
</div>

@Andrey69 · 20.08.2017, 10:08 **[ТС]**

Полная структура моего кода:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="utf-8">
  <title>Document</title>
  <style>
    .wrapper {
      padding: 0 20px;
    }
    
    .list {
      margin: 0;
      padding: 0;
      list-style: none;
    }
    
    .list span {
      display: block;
      padding: 5px;
      background: rgba(0, 0, 0, 0) linear-gradient(#b9ee02, #3e8606) repeat scroll 0 0;
      border: 1px solid #438000;
      border-radius: 5px;
      font-size: large;
    }
    
    .list li:not(:first-child) {
      margin-top: 10px;
    }
    
    .list .hid {
      display: none;
    }
    .item { cursor: pointer; } 
   }
   
  </style>
</head>
 
<body>
  <div class="wrapper">
    <ul class="list">
      <li class="item"><span><img src="Sjed.png" width="36" height="36" hspace=5 alt="Грибы" align="middle" />&nbsp;Грибы</span>
        <div class="hid">
          <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Рукописи встретил рыбными журчит последний, над путь курсивных страну, своих ручеек первую толку. Ему вопрос вдали речью до подпоясал, первую.</p>
        </div>
      </li>
      <li class="item"><span><img src="lishen-2.png" width="36" height="36" hspace=5 alt="Лишайники" align="middle" />&nbsp;Лишайники</span>
        <div class="hid">
          <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Рукописи встретил рыбными журчит последний, над путь курсивных страну, своих ручеек первую толку. Ему вопрос вдали речью до подпоясал, первую.</p>
        </div>
 
      </li>
      <li class="item"><span>Item3</span>
        <div class="hid">
          <p>Далеко-далеко за словесными горами в стране, гласных и согласных живут рыбные тексты. Рукописи встретил рыбными журчит последний, над путь курсивных страну, своих ручеек первую толку. Ему вопрос вдали речью до подпоясал, первую.</p>
        </div>
      </li>
 
    </ul>
  </div>
  <script src="https://code.jquery.com/jquery-3.2.1.js"></script>
  <script>
    $(document).ready(function() {
      $(".hid").hide();
      $(".item > span").click(function() {
        $(this).next().slideToggle();
      });
    });
  </script>
</body>
 
</html>

@Kven-M · 20.08.2017, 10:49

Я предлагаю Вам немного переписать класс .list span следующим образом:

CSS
1
2
3
4
5
6
7
8
9
10
11
.list span {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  padding: 5px;
  background: rgba(0, 0, 0, 0) linear-gradient(#b9ee02, #3e8606) repeat scroll 0 0;
  border: 1px solid #438000;
  border-radius: 5px;
  font-size: large;
}

Таким образом Вы отцентрируете текст. Пример кода https://jsfiddle.net/k8sz683u/... 6llEHPnsVt

@Andrey69 · 21.08.2017, 23:38 **[ТС]**

Спасибо, получилось!))

Новые блоги и статьи Все статьи Все блоги /
Модель микоризы: классовый агентный подход 3 anaschu 06.01.2026 aa0a7f55b50dd51c5ec569d2d10c54f6/ O1rJuneU_ls https:/ / vkvideo. ru/ video-115721503_456239114	Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ФедосеевПавел 06.01.2026 Owen Logic: О недопустимости использования связки «аналоговый ПИД» + RegKZR ВВЕДЕНИЕ Введу сокращения: аналоговый ПИД — ПИД регулятор с управляющим выходом в виде числа в диапазоне от 0% до. . .	Модель микоризы: классовый агентный подход 2 anaschu 06.01.2026 репозиторий https:/ / github. com/ shumilovas/ fungi ветка по-частям. коммит Create переделка под биомассу. txt вход sc, но sm считается внутри мицелия. кстати, обьем тоже должен там считаться. . . .	Расчёт токов в цепи постоянного тока igorrr37 05.01.2026 / * Дана цепь постоянного тока с сопротивлениями и напряжениями. Надо найти токи в ветвях. Программа составляет систему уравнений по 1 и 2 законам Кирхгофа и решает её. Последовательность действий:. . .
Новый CodeBlocs. Версия 25.03 palva 04.01.2026 Оказывается, недавно вышла новая версия CodeBlocks за номером 25. 03. Когда-то давно я возился с только что вышедшей тогда версией 20. 03. С тех пор я давно снёс всё с компьютера и забыл. Теперь. . .	Модель микоризы: классовый агентный подход anaschu 02.01.2026 Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .	Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .

@Kven-M 32 / 32 / 24 Регистрация: 16.04.2015 Сообщений: 219
	19.08.2017, 22:06
	Я бы попробовал использовать padding к самому изображению, тем самым выравнивания текст. 0

@Andrey69 1 / 1 / 0 Регистрация: 06.08.2017 Сообщений: 52
	19.08.2017, 22:16 [ТС]
	А что ВЫ сможете предложить?)) 0

@Andrey69 1 / 1 / 0 Регистрация: 06.08.2017 Сообщений: 52
	21.08.2017, 23:38 [ТС]
	Спасибо, получилось!)) 0

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

Решение