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

例如：

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