css - 更改居中图像的顶部位置

Question

你好，我尝试将刚刚居中的图像向下移动一些像素，但它似乎没有发生!

这是我到目前为止使用的代码...

.fearless{
       display: block;
    margin-left: auto;
    margin-right: auto;
  }

<img src="/toKoritsi/images/fearlessgirl.jpg" alt="fearless Girl"  class="fearless"/>

任何人都可以告诉我一种正确的方法来将图像移动到靠近底部而不改变其他任何东西吗？提前致谢...

Answer 1

可以使用 margin-top 将显示 block 的元素的上边缘向下移动

例如:

.fearless{
       display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
  }

您还可以将这些命令压缩为:

.fearless{
       display: block;
    margin: 10px auto 0 auto;
  }

作为替代方案，虽然我会先尝试上述方法，但您可以尝试相对定位和顶部样式:

.fearless{
       display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    top : 10px;
  }