1
votes

Comment déplacer le logo de mon site Web plus haut dans la page

Je suis très novice en HTML et CSS et je souhaite déplacer mon logo plus haut sur la page au lieu de le déplacer plus bas vers le centre.

   <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%;
}

Comment puis-je déplacer mon logo plus haut afin que je puisse ajouter une barre de navigation, etc.

html css markup

0 commentaires

3 Réponses :

2
votes

L'une des méthodes consiste simplement à utiliser margin-top: et le pourcentage souhaité. Vous pouvez utiliser ici des pixels si vous le souhaitez. Vous l'avez déjà positionné verticalement par marge gauche et droite, vous pouvez faire de même avec le haut et le bas pour la position horizontale.

Je vous recommande de lire ceci, tout ce dont vous avez besoin est ici, commencez par le positionnement de base. w3schools.com/w3css Aussi: Exemples et Comment faire . J'ai beaucoup appris là-bas au début.

   <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;
    margin-top:20%;
    width:60%;
    height:60%;
}

1 commentaires

J'ai dû mettre la marge supérieure à -10% pour la faire monter plus haut dans la page car 20% margin-top ne fait que monter le logo jusqu'à présent.

1
votes

Vous pouvez également définir les positions absolues (en haut / à gauche), puis transformer en fonction de la taille de l'image (un peu basée sur hors de ceci )

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

0
votes

Simple, définissez la marge supérieure sur une valeur souhaitée. Pour ce faire, vous pouvez utiliser le raccourci margin propriété:

<img src="https://via.placeholder.com/400x200" alt="placeholder">

img {
  display: block;
  margin: 20px auto;
  width: 400px;
  height: 200px;
}

Cela définira les marges supérieure et inférieure, et les marges latérales seront automatiquement calculées pour vous (ce qui centrera efficacement l'image).

0 commentaires