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>

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

1 个答案: