Как я могу переместить картинку на моей HTML-странице?

У меня есть картинка, и мне нужно переместить ее под словом с тире, но я не могу это сделать по какой-то причине он не хочет поднимать эту иконку и теперь я добавляю другие, а он ставит их еще ниже код:

весь код:

    body  
Подпишись
    

Отслеживать

ДОБРЫЙ ДЕДУШКА

задан 21 июл 2019 в 16:22

ДОБРЫЙ ДЕДУШКА ДОБРЫЙ ДЕДУШКА

25 1 1 золотой знак 1 1 серебряный знак 4 4 бронзовых знака

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

У вас у картинки с линией высота указана 180 пикселей, из-за этого и получается дырка.

Отслеживать

ответ дан 21 июл 2019 в 18:39

2,114 1 1 золотой знак 11 11 серебряных знаков 18 18 бронзовых знаков

Как сдвинуть изображение вправо с помощью CSS кода?

margin
position relative и left
transform
.

Решения вопроса 1

Dima Polos @dimovich85 Куратор тега CSS
https://u-academy.net/
margin-left: 100px;
Ответ написан более трёх лет назад
Комментировать
Нравится 1 Комментировать
Ответы на вопрос 2

Артем Ткачик @Artemogirock
Web developer
margin-left: auto
Если что, это пропиши для изображения. Ну и display: block
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать

position: absolute;
left: 100px;
Ответ написан более трёх лет назад
Комментировать
Нравится Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

• HTML
• +1 ещё

Как пофиксти проблему с амперсантом?

• 1 подписчик
• 10 часов назад
• 53 просмотра

• HTML
• +2 ещё

Подобное поведение норма?

• 1 подписчик
• 12 часов назад
• 103 просмотра

• HTML
• +3 ещё

Почему не работает переход на страницу?

• 1 подписчик
• 12 часов назад
• 106 просмотров

• CSS

Что за баг с ховером?

• 1 подписчик
• вчера
• 98 просмотров

• HTML
• +1 ещё

Как блок вывести поверх других?

• 1 подписчик
• вчера
• 56 просмотров

• CSS
• +1 ещё

Почему не подгружается картинка?

• 1 подписчик
• вчера
• 85 просмотров

• CSS
• +2 ещё

Как Python и Selenium заставить найти текст?

• 1 подписчик
• 18 нояб.
• 53 просмотра

• HTML
• +1 ещё

Как сделать данное задание?

• 1 подписчик
• 17 нояб.
• 126 просмотров

• JavaScript
• +2 ещё

Как создать красивый выбор даты в форме?

• 1 подписчик
• 17 нояб.
• 72 просмотра

• CSS

Почему safari воспроизводит transition при открытии страницы?

• 1 подписчик
• 17 нояб.
• 21 просмотр

от 150 000 ₽
от 90 000 до 140 000 ₽
от 150 000 ₽
20 нояб. 2023, в 09:22
50000 руб./за проект
20 нояб. 2023, в 07:54
13000 руб./за проект
20 нояб. 2023, в 07:06
20000 руб./за проект

Минуточку внимания

Присоединяйтесь к сообществу, чтобы узнавать новое и делиться знаниями

• Как перенести описание вниз?
  • 2 подписчика
  • 0 ответов
  • 2 подписчика
  • 0 ответов
  • 3 подписчика
  • 2 ответа
  • 2 подписчика
  • 1 ответ
  • 2 подписчика
  • 2 ответа
  • 2 подписчика
  • 2 ответа
  • 2 подписчика
  • 4 ответа
  • 2 подписчика
  • 1 ответ
  • 2 подписчика
  • 2 ответа
  • 2 подписчика
  • 1 ответ

  Как выровнять HTML изображение по центру

  

  Позиционирование и выравнивание изображений на странице HTML имеет решающее значение для макета страницы. Один из наиболее распространенных вопросов — как выровнять изображение по центру определенной секции. В этой статье мы обсудим множество возможных способов размещения изображений в центре заданной области.

  В примерах данной статьи, чтобы сделать видимой границу оберточных элементов, мы сделаем их серого цвета. Итак, приступим.

  Центрирование в параграфе

  В первом примере мы покажем, как разместить изображение в центре элемента-контейнера, которым может быть элемент div, элемент параграфа и другие теги.

  

    
   
   .aligncenter 

  Здесь всю работу делает CSS свойство text-align: center;. Если вы знаете код CSS, то вам ничего не нужно объяснять.

  Центрирование при помощи отступов

  Чтобы отцентрировать блоковый элемент, достаточно применить к нему стиль margin: auto;. Но известно, что тег img – это строковый элемент. Как же быть? Все очень просто. Чтобы все заработало, нужно сделать его блоковым применив CSS стиль display: block;.

  

    
   
   .marginauto 

  Центрирование при помощи тега

  Следует помнить, что тег является устаревшим и не поддерживается в HTML5. Однако он все еще распознается веб-браузерами вроде Google Chrome.

  Раньше это был предпочтительный метод, потому что он не требовал таблиц стилей, а только простой HTML.

  Нам не хотелось бы использовать устаревшие элементы в статье, поэтому здесь нет демонстрации этого примера, только код.

  Центрирование при помощи атрибута align=middle

  Еще один устаревший метод, который не требует использования CSS, похожий на предыдущий пример. В более старых версиях HTML мы могли центрировать изображение, устанавливая атрибут тега align=»middle».

  Выравнивание изображения по центру по вертикали

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

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

  

    
   
   .verticalcenter 

  Одновременное центрирование по горизонтали и по вертикали

  Мы можем комбинировать горизонтальное и вертикальное выравнивание, как показано в примере ниже.

  

    
   
   .verticalhorizontal 

  Надеемся, что сегодня, прочитав эту статью, вы узнали что-то новое, и вы будете использовать полученные знания при разработке своих сайтов.

  Background-position: позиционирование фона

  Свойство background-position позволяет указывать начальную позицию фонового рисунка сразу для двух осей — x и y. Впрочем, можно воспользоваться и отдельными свойствами для каждой оси — background-position-x и background-position-y .

  Значения background-position

  В качестве значений могут выступать как специальные ключевые слова, так и числовые значения в единицах измерения CSS — процентах, пикселях и т. д.

  Ключевые слова для горизонтального позиционирования

  • left — фоновый рисунок прилеплен к левой стороне элемента;
  • center — фоновый рисунок расположен в центре оси x;
  • right — фоновый рисунок прилеплен к правой стороне элемента.

  Ключевые слова для вертикального позиционирования

  • top — фоновый рисунок прилеплен к верхней стороне элемента;
  • center — фоновый рисунок расположен в центре оси y;
  • bottom — фоновый рисунок прилеплен к нижней стороне элемента.

  Сокращенная запись для двух осей

  Часто позиционирование фона задается сразу для двух осей. Для этого удобно пользоваться сокращенной записью, т. е. свойством background-position. Оно принимает одно либо два значения (для позиционирования сразу по двум осям либо по каждой отдельно соответственно).

  Ниже — различные примеры позиционирования фона с помощью ключевых слов:

  background-position: top center; /* фон вверху по центру */ background-position: top right; /* фон в верхнем правом углу */ background-position: bottom left; /* фон в левом нижнем углу */ background-position: center right; /* фон справа по центру */

  Значения можно менять местами — они будут работать так же.

  

  Если вы установили повтор фона с помощью свойства background-repeat , то background-position будет определять, от какой точки будет начинаться дублирование изображения.

  Для позиционирования фона можно использовать и одно значение для двух осей сразу:

  background-position: center; /* фон по центру */ background-position: left; /* фон слева по центру */ background-position: right; /* фон справа по центру */ background-position: top; /* фон вверху по центру */ background-position: bottom; /* фон внизу по центру */

  

  Точные значения в единицах измерения CSS

  Вы можете управлять расстоянием фона от левого и верхнего краев элемента с помощью точных значений, указанных в единицах измерения CSS (например, в пикселях либо em). Пример:

  Такая запись означает, что фон удален от левого края на 10 пикселей и от верхнего края на 25 пикселей. Здесь важен порядок записи значений: первое значение отвечает за положение фонового рисунка по горизонтали, второе — по вертикали. Допустимы и отрицательные значения (например, они могут быть полезны в случае, если с левой или верхней стороны фоновой картинки есть область, которую необходимо спрятать).

  Регулировать расстояние фона, отталкиваясь от правой или нижней стороны элемента, можно с помощью специального значения, которое записывается так:

  Здесь ключевые слова right и bottom говорят браузеру, что вы хотите делать отсчет от правой и нижней стороны. Следом за каждым из ключевых слов записывается желаемое значение. Так, 15px — это расстояние между фоном и правой стороной элемента, а 40px — расстояние между фоном и нижней стороной элемента.

  

  Процентные значения

  Большое удобство предоставляет возможность записи значений в процентах. Расстояние вычисляется, исходя из размеров элемента с заданным фоном. Допустимы отрицательные процентные значения, но результат здесь может быть неожиданным.

  Лучший способ понять, как перемещается фон под управлением процентных значений — это попрактиковаться. А пока что покажем несколько примеров позиционирования фона через проценты:

  

  Обратите внимание: значение 50% идеально центрирует фоновое изображение (как по вертикали, так и по горизонтали), поскольку точка центра устанавливается в середине фона, а не в его начале или конце.

  Комбинирование значений

  Да, вы можете записывать для каждой из осей свое значение в необходимых единицах измерения (либо используя ключевое слово). Комбинируйте точные значения с относительными, ключевые слова со значениями в единицах измерения — полная свобода действий. Примеры:

  

  Важно: фоновые изображения и печать

  Как правило, при печати страницы фоновые изображения не отображаются. Учитывайте это при работе с важной графикой — например, логотип компании, карту проезда и другие иллюстрации, содержащие важную информацию, рекомендуется добавлять через тег .

  Поддержка браузерами

  Запись background-position с двумя параметрами поддерживается всеми используемыми браузерами.

  Запись с четырьмя параметрами для отсчета от правой и нижней сторон работает только в IE9+, Firefox 13+, Chrome 25+, Safari 7+.

  Свойства background-position-x и background-position-y не поддерживаются браузером Firefox вплоть до 48-й версии, а также не воспринимаются мобильными браузерами Opera Mini и Opera Mobile до версии 12.1.

  Подробную информацию вы всегда можете посмотреть на сайте Caniuse.com.

  Далее в учебнике: background-attachment — фиксация фона.

  Похожие публикации:

  1. Как изменить тип кампании в google adwords
  2. Как отследить заказ в яндекс еда
  3. Как снять магнитолу на ford fusion
  4. Как убрать обводку в indesign