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

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

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

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

HTML5

1	<span><img src="Sjed.png" width="36" height="36" hspace=5 alt="Грибы" align="middle" /> Грибы</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

<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

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

.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 **[ТС]**

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

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

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

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

Опции темы

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

Решение