Как мне продвинуть мой сайт на 1000 * дальше вверх по странице - PullRequest
Новая
       27

Как мне продвинуть мой сайт на 1000 * дальше вверх по странице

1 голос
/ 16 апреля 2020

Я очень плохо знаком с HTML и CSS и хочу переместить мой lo go дальше вверх по странице, а не вниз к центру. 

   <body>
     <img id="derrick-ogole-logo" src="images/derrick-ogole-logo.png" alt="Derrick Ogole Official Logo">
   </body>
</html>


   #derrick-ogole-logo{
    display:block;
    margin-left:auto;
    margin-right:auto;
    width:60%;
    height:60%;
}

Как я могу переместите мой lo go дальше вверх, чтобы я мог добавить панель навигации и т.д. c.

enter image description here

Ответы [ 3 ]

2 голосов
/ 16 апреля 2020

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

Я рекомендую вам прочитать это, все, что вам нужно здесь, начните с базового c позиционирования. w3schools.com / w3 css Также: Примеры и How To . Я многому научился там с самого начала. 

   #derrick-ogole-logo{
    display:block;
    margin-left:auto;
    margin-right:auto;
    margin-top:20%;
    width:60%;
    height:60%;
}
   <body>
     <img id="derrick-ogole-logo" src="images/derrick-ogole-logo.png" alt="Derrick Ogole Official Logo">
   </body>
</html>
1 голос
/ 16 апреля 2020

Вы также можете установить absolute позиции (вверху / влево), а затем преобразовать на основе размера изображения (вроде от этого ) 

<html>
  <head>
    <style>
    #derrick-ogole-logo {
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translate(-50%, 0%);
    width:60%;
    height:60%;
    }
    </style>
  </head>
  <body>
  <img id="derrick-ogole-logo" src="https://derrickogole.com/wp-content/uploads/2019/08/cropped-32248_-DERRICK-OGOLE-Logo_-MJ_01.png" alt="Derrick Ogole Official Logo">
  </body>
</html>
0 голосов
/ 16 апреля 2020

Простой, установите верхнее поле на желаемое значение. Для этого вы можете использовать свойство margin: 

img {
  display: block;
  margin: 20px auto;
  width: 400px;
  height: 200px;
}
<img src="https://via.placeholder.com/400x200" alt="placeholder">

Это установит верхнее и нижнее поле, и боковые поля будут автоматически рассчитаны для вас (что будет эффективно центрировать изображение).

...