我正在尝试在水平菜单栏中垂直对齐和成像。理想情况下，我想使用内联 CSS 设置图像的填充/边距。
但是，当我尝试添加 margin-top 或 padding-top 时，这会向下移动我的所有链接以及图像。出于美观原因，我只是想将图像向下移动。
<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>
最佳答案
只需对 a 元素使用 vertical-align: top。
<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>关于css - 如何更改 <div> 标签中图像的相对位置，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54079122/