Question

我正在尝试为具有水平菜单标签（由其他html文件的链接组成）的网页制作标题，但我发现很难将图标放在与菜单标签相同的水平行上，同时保持图标和标签的对齐方式不同（左侧图标，右侧标签）。当我将图标移出与链接相同的组并使用css使它们以不同方式对齐时，结果是两个（图标和制表符）位于不同的行中。我甚至尝试将align属性直接用于图像标记，但它也使所有内容都对齐到左侧。

所以这是我的代码到目前为止，使用随机徽标图像。

NSMutableArray<GenericProduct *> *array = [NSMutableArray array];

所以这是一个图像，比较我希望代码做什么和代码（上面）实际做的事情： https://i.stack.imgur.com/hTGob.jpg

这是上面代码中使用的icon.jpg： https://i.stack.imgur.com/qW4UU.jpg

提前致谢，请询问您是否希望我澄清一些内容！

Answer 1

li { /*Space between tabs */
    display: inline-block;
    padding: 0px 25px 0px 25px; /* distance between menu tabs*/
    vertical-align: central;
    line-height:100%;
    height:100%;
}
a{
    display: inline-block;
    line-height:100px;
    height:100%;
}
div/*MENU CSS*/ {
    background: black;
    height:100px;
}
img {
    text-align: left;
    height:100px;
}
ul {
    text-align: right;
    padding: 0px;
    margin: 0px;
    float:right;
    height:100%;
}

替换以下css元素，这假设图像高度为100px，因此将所有出现的更改为图像的实际高度

Answer 2

您可以将Flexbox与以下设置一起用于nav内的DIV：

（注意：我减少了填充，因此所有菜单项都可以放在彼此相邻的片段窗口中）

nav>div {
  height: 100px;
  display: flex;
  align-items: center;
}

nav>div {
  height: 100px;
  display: flex;
  align-items: center;
}

img {
  text-align: left;
}

ul {
  text-align: right;
  padding: 0px;
  margin: 0px
}

a {
  color: white;
  text-decoration: none;
  /* remove link underline*/
  font-size: 20px;
}

div
/*MENU CSS*/

{
  background: black;
}

a:hover
/* Change color mouse hover */

,
a:active {
  color: orange;
}

li {
  /*Space between tabs */
  display: inline;
  padding: 0px 10px 0px 10px;
  /* distance between menu tabs*/
}

<nav>
  <div>
    <img src="http://placehold.it/50x40/fa0">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="drawing.html">Drawing</a></li>
      <li><a href="music.html">Music</a></li>
      <li><a href="handcrafted.html">Handcrafted</a></li>
      <li><a href="literature.html">Literature</a></li>
      <li><a href="search.html">Search</a></li>
    </ul>
  </div>
</nav>

如何使页眉菜单垂直对齐＆amp;图标左侧对齐

2 个答案: