在 css 中将图像移到顶部

Question

我有一个 fiddle，我想在其中将图像（键盘）移到顶部，使其看起来与下面的设计完全相似。

在我的 fiddle 中，键盘图像略微向下，如 fiddle 中所示。我想知道如何将键盘图像稍微向上推，使其看起来与上述设计完全相似。

我的 HTML 具有键盘图像的代码片段是：

    <div class="full-stack-developer">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-3 left-side">
                    <a href=""><img src="assets/img/Uploads/keyboard.png" </a></div>
                <div class="col-lg-3 right-side"> <a href="">Full Stack Developer</a>
                    <ul>
                        <a href=''>
                            <li>Qualification</li>
                        </a>
                        <a href=''>
                            <li>Go here</li>
                        </a>
                    </ul>
                </div>
            </div>
        </div>
    </div>

只是检查是否可以不使用 position: relative and position: absolute ?

Answer 1

您可以为图片添加边距 top -50px。

#id_keyboard {
    margin-top: -50px;
}

https://jsfiddle.net/2bd2zrm9/5/embedded/result/

Answer 2

给图片加上一些id和一些css如下：设置一个 id

 <a href=""><img id = "offset" src="https://s10.postimg.org/wz9hbucvd/keyboard.png" </a>

上移一点

#offset{
  margin-top:-40px
}

在 css 中将图像移到顶部

move an image towards the top in css

html

javascript

css

twitter-bootstrap-4