所以我想将几个 span 与图像旁边的文本对齐，图像在左上角有一个固定位置，但是，我做了一些研究并决定尝试 max-height:5 %;width:auto;height:auto; 以保持图像相对于导航栏和屏幕分辨率的大小。我想完成类似于 http://www.csgoswag.com 上的导航栏的操作。 ，但我无法让文本正确对齐。另外，我不认为我使用了一种好的方法来将导航栏和 Logo 的大小保持在合适的大小，因此无论您的分辨率如何，它都不会占用太多页面。如果您能帮助解决此问题，我们将不胜感激，谢谢。
这是我当前代码的 jsfiddle:
https://jsfiddle.net/bfqumkq7/
编辑:我也意识到我必须保持文本的大小与导航栏相同，我该怎么做呢？
最佳答案
由于 #nav 是 position:fixed，因此无需在 div 中使用任何元素的定位。
我们将使用 display:inline-block 水平对齐元素。
#nav 设置为 max-height:5%，因此 Logo 可以是 max-height:100%。
至于菜单文本，OP 希望它的大小与 #nav 相同，所以我将其设置为 5vh(垂直高度单位)。
不过，我不推荐最后一种技术。我会改用 em 或 px 并根据需要进行调整。
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: #0097FE;
}
#nav {
background-color: #262626;
width: 100%;
height: 5%;
position: fixed;
top: 0;
left: 0;
font-family: 'Slabo 27px', serif;
}
.logo {
display: inline-block;
max-height: 100%;
}
#nav_container_full {
display: inline-block;
vertical-align: top;
;
}
.nav {
display: inline-block;
vertical-align: top;
padding: 0 10px;
color: #fff;
font-size: 5vh;
}<body>
<div id="nav">
<img src="http://i.imgur.com/lqApacL.png" class='logo'>
<div id='nav_container_full'>
<span class="nav" href="index.html">Home</span>
<span class="nav" href="index.html">Tokens</span>
<span class="nav" href="index.html">Store</span>
<span class="nav" href="index.html">Logout</span>
</div>
</div>
</body>关于html - 将图像旁边的文本与固定位置和未确定的大小对齐？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34474676/