nav链接文本不能和图片对齐
<div class="sitemenu">
<nav>
<a href="/" class="sitemenu-logo">
<img
src="../inara-offical/INARA - Elite_Dangerous companion_files/inaramenulogo.png"
/>
a>
<a href="/elite" class="sitemenu-elite">Elite:Dangerousa>
<a href="/morps" class="sitemenu-morps">MMo.RPG.SPACEa>
nav>
div>
div.sitemenu {
position: relative;
width: 100%;
min-width: 310px;
min-height: 40px;
z-index: 889;
line-height: normal;
background: #2e2e2e;
}
div.sitemenu nav {
position: relative;
width: 100%;
z-index: 889;
line-height: 24px;
max-width: 1400px;
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
/*padding-left: $imgmenulogowidth + 15px + 30px;*/
box-sizing: border-box;
}
div.sitemenu a {
position: relative;
padding: 8px 20px;
display: inline-block;
text-decoration: none;
color: #c5c5c5;
font-size: 13.5px;
font-family: inherit;
box-sizing: border-box;
}
使用margin可以对齐图片和文本,但似乎原代码不是用margin来调的。这个效果是在INARA网站看的的,css原代码如上,奇怪的是仍然不能对齐
好吧,可以用vertical-align:middle解决。因为之前用vertical-align:top不起作用,而这时候还不知道有middle,打扰大家了
给图片css加vertical-align:bottom就行了。
有帮助的话采纳一下哦!关于这个属性可以看我总结的这篇博客:
https://blog.csdn.net/qq_57421630/article/details/122923301?app_version=5.9.0&code=app_1562916241&csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22122923301%22%2C%22source%22%3A%22qq_57421630%22%7D&uLinkId=usr1mkqgl919blen&utm_source=app