Question

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

徽标的HTML

Option

HTML超链接

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

CSS链接样式

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

更多链接样式

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

Answer 1

只需将display: flex;提供给父级，将margin: 0 auto;提交给.linkstyle

body {
    display: flex;
}

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

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

我的网站徽标/图片颠覆了我的超链接文字

2 个答案: