Question

所以我想在图像旁边对齐几个跨度的文本，左上角有一个固定的位置，但是，我做了一些研究并决定尝试max-height:5%;width:auto;height:auto; in为了保持图像相对于导航栏的大小和屏幕分辨率。我想在http://www.csgoswag.com上完成类似于导航栏的操作，但我无法正确对齐文本。此外，我不相信我使用一种好的方法来保持导航栏和徽标的大小不变，因此无论您的分辨率如何，它都不会占用太多的页面。感谢您解决此问题的任何帮助。谢谢。

这是我当前代码的jsfiddle：

https://jsfiddle.net/bfqumkq7/

编辑：我也意识到我必须保持文本的大小和导航栏一样，我怎么能这样做呢？

Answer 1

由于#nav为position:fixed，因此无需使用div中任何元素的定位。

我们将使用display:inline-block水平对齐元素。

#nav设置为max-height:5%，因此徽标可以为max-height:100%。

对于菜单文本，OP希望其大小与#nav相同，因此我将其设置为5vh（垂直高度单位）。

我不建议使用最后一种技术。我会改用em或px并根据需要进行调整。

JSFiddle Demo

* {
  -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>

将图像旁边的文本与固定位置和未确定大小对齐？

1 个答案: