CODEWITHSUNDEEP
htmlcssmarkup
derrickogole
derrickogole

Reputation: 127

How do I move my website logo further up the page

I am very new to HTML and CSS and want to move my logo further up the page instead of it being further down towards the 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%;
}

How can I move my logo further up so I can add a navigation bar etc.

enter image description here

Upvotes: 1

Views: 1094

Answers (3)

Juan Marco
Juan Marco

Reputation: 3241

Simple, set the top margin to a desired value. To do this you can use the shorthand margin property:

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

This will set the top and bottom margin, and the side margins will be automatically calculated for you (which will effectively center the image).

Upvotes: 0

Frank Alvaro
Frank Alvaro

Reputation: 487

You could also set the absolute positions (top/left), then transform based on the image size (kinda based off of this)

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

Upvotes: 1

ikiK
ikiK

Reputation: 6532

One of the ways is simply using margin-top: and desired percentage. You can use here pixels if you want. You already positioned it vertically by margin-left and right, you can do the same with top and bottom for horizontal position.

I recommend you reading this, everything you need is here, start with basic positioning. w3schools.com/w3css Also: Examples and How To. I learned a lot there at start.

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

Upvotes: 2

Related Questions