如何更改图像在图像中的相对位置 <div> 标签

Question

我正在尝试在水平菜单栏中垂直对齐和成像。 理想情况下，我想使用嵌入式CSS设置图像的填充/边距。

但是，当我尝试添加空白页边距或顶部空白时，这会将所有链接以及图像向下移动。 我只是出于美观原因要将图像向下移动。

<style>
body {
background: #000000 url("/images/background.jpg") no-repeat fixed;background-size:cover;
width: 1000px;
}

#menu a {
text-decoration: none;
color: white;
padding-left: 25px;
padding-right: 25px;
}
#menu a:hover {
color: red;}    
</style>
</head>
<body>  
<div id="menu"><a href="/who-is-it-for.html">WHO IS IT FOR</a><a href="/contact.html">BOOK NOW</a><a href="/team-building-locations.html">LOCATIONS</a>

<a href="/index.html"><img src="/images/logo-menu.png" alt="home" width="90" onMouseOver="this.src='/images/logo-menu-rollover.png';" onMouseOut="this.src='/images/logo-menu.png';"></a>

<a href="/team-building-photos.html">PHOTOS</a><a href="/team-building-pricing.html">PRICING</a><a href="/team-building-locations.html">NEWS</a><a href="/faqs.html">FAQ</a></div>

Answer 1

只需使用vertical-align: top的a元素。

 <style> body { background: #000000 url("/images/background.jpg") no-repeat fixed;background-size:cover; width: 1000px; } #menu a { text-decoration: none; color: white; padding-left: 25px; padding-right: 25px; vertical-align: top /* added this option */ } #menu a:hover { color: red } img { margin-top: 50px /* whatever you want */ } </style> </head> <body> <div id="menu"><a href="/who-is-it-for.html">WHO IS IT FOR</a><a href="/contact.html">BOOK NOW</a><a href="/team-building-locations.html">LOCATIONS</a> <a href="/index.html"><img src="//via.placeholder.com/100/4B89DA/FFFFFF" alt="home" width="90" onMouseOver="this.src='/images/logo-menu-rollover.png';" onMouseOut="this.src='/images/logo-menu.png';"></a> <a href="/team-building-photos.html">PHOTOS</a><a href="/team-building-pricing.html">PRICING</a><a href="/team-building-locations.html">NEWS</a><a href="/faqs.html">FAQ</a></div>