如何将我的网站徽标进一步移至页面上方

Question

我是 HTML 和 CSS 的新手，我想将我的徽标移到页面上方，而不是向下移到中心。

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

如何将徽标进一步向上移动以便添加导航栏等

Answer 1

其中一种方法是简单地使用 margin-top: 和所需的百分比。如果你愿意，你可以在这里使用像素。您已经通过 margin-left 和 right 将其垂直放置，您可以对水平位置的顶部和底部执行相同的操作。

我推荐你阅读这篇文章，你需要的都在这里，从基本定位开始。 w3schools.com/w3css Also: Examples and 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>

Answer 2

您还可以设置 absolute 位置 (top/left)，然后根据图像大小进行变换（有点基于 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>

Answer 3

很简单，将上边距设置为所需的值。为此，您可以使用 shorthand margin 属性:

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

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

这将设置顶部和底部边距，并且会自动为您计算边距（这将使图像有效地居中）。

如何将我的网站徽标进一步移至页面上方

How do I move my website logo further up the page

html

css

markup