我的网站 logo/image 降低了我的超链接文本

Question

我正在用 notepad++ 创建一个草稿网站，我希望在我的页面 links 旁边的左上角（不是一直向左）有一个图像作为我的徽标。但是，当我通过 html 插入图像时，它会将原本位于顶部的文本 link 向下移动。我怎样才能修复它，使 link 留在徽标旁边的顶部？（仍然居中） Green lines indicate the space it is creating

HTML 徽标

<img src="Images/website logo draft.png" height="100" width="200"/>

HTML 超级links

<div class="linkstyle">
<a href="http://www.w3schools.com"> Home</a>
<a href="http://www.w3schools.com">Page 2</a>
<a href="http://www.w3schools.com">Page 3</a>
<a href="http://www.w3schools.com">Page 4</a>
<a href="http://www.w3schools.com">Page5</a>
</div>

CSS link 造型

.linkstyle{
  text-align: center;
  font-family:Arial;
  font-size: 30px;
 }

更多 link 造型

a {
color: white;
text-decoration: none;
}

Answer 1

只要把display: flex;给parent，把margin: 0 auto;给.linkstyle

body {
    display: flex;
}

这里body是parent所以，我给body了

Fiddle

Answer 2

为 img

试试这个 css

img {
    display: inline-block;
    vertical-align: top;
}

尝试以下 css 以获得 div

.linkstyle {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    font-family: Arial;
    font-size: 30px;
}

我的网站 logo/image 降低了我的超链接文本

My website logo/image bumps down my hyperlinked text

html

css

notepad++