我的网站徽标/图像颠倒了我的超链接文本

Question

我正在 notepad++ 上创建一个草稿网站，我希望在我的页面链接旁边的左上角（不是一直到左）有一个图像作为我的徽标。但是，当我通过 html 插入图像时，它会将最初位于顶部的文本链接向下移动。如何修复它以使链接保持在徽标旁边的顶部？ （仍然居中） Green lines indicate the space it is creating

标志的HTML

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

HTML 超链接

<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 链接样式

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

更多链接样式

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

Answer 1

只需将display: flex; 给父母，margin: 0 auto; 给.linkstyle

body {
    display: flex;
}

这里的 body 是父母所以，我已经给了 body。

Fiddle

Answer 2

试试这个 css for img

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