Я не могу переместить изображение, что мне делать? - PullRequest
Новая
       14

Я не могу переместить изображение, что мне делать?

0 голосов
/ 15 мая 2019

Я пытаюсь переместить изображение (map.png), но не могу его переместить.

Мой HTML-код: 

<div class="map">      
    <h3 style="text-align:right;" >
    <img src="img/map.png" alt="">
    </h3>
    </div>

Мой код CSS: 

.map {
  position: relative;
  top: 20px;
}

У меня есть репозиторий GitHub по адресу: https://github.com/t0091/bootstrap

Ответы [ 3 ]

1 голос
/ 15 мая 2019

Я все еще не уверен, чего вы на самом деле пытаетесь достичь. Однако я взял ваш код и переписал его так, чтобы ваше изображение было отцентрировано по вертикали и горизонтали. Вы можете добавить любой CSS в класс .image-content.

HTML 

<div class="flex-display">
<div class="image-content">
    <img src="https://via.placeholder.com/150" alt=""> //Use you correct image path
</div>
</div>

CSS 

.flex-display {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.image-content {
  // Write your image styling here if needed
}
0 голосов
/ 15 мая 2019 

.map {
  position: relative;
  margin-top: 20px;
}

В соответствии с вышеприведенным решением вам нужно всего лишь использовать margin-top вместо поля и, в соответствии с приведенным ниже, просто изменить позицию . 

.map {
  position: absolute;
  top: 20px;
}
0 голосов
/ 15 мая 2019

Убедитесь, что ваша фотография находится в правильном каталоге и тип файла правильный. Чтобы центрировать изображение и убедиться, что оно появляется где-то на вашей веб-странице, вы можете добавить эту CSS 

.map {
   display: block;
   margin-left: auto;
   margin-right: auto;
   width: 50%;
}

Если после попытки это все еще не работает тогда, это должно быть что-то определенное с изображением. Убедитесь, что изображение написано одинаково в вашем коде, CameCase имеет значение! Также проверьте правильность пути к файлу и тип файла. Вы также можете попробовать добавить '/' перед /img/map.png

Наконец, вот ресурс, который объясняет работу изображений HTML / CSS. HTML ИЗОБРАЖЕНИЯ

...