如何使页眉菜单垂直对齐并将图标对齐到左侧

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

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

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8"/> 
    <title>[Website-Name] | Home</title> 
</head> 
<style type="text/css"> 
    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 25px 0px 25px; /* distance between menu tabs*/ 
      vertical-align: middle; 
    } 


</style> 
<body> 
    <nav> 
    <div> 
    <img src="icon.jpg">  
     <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> 
</body> 
</html>

所以这是比较什么，我想代码做什么的代码（以上）实际上是做一个形象： https://i.stack.imgur.com/hTGob.jpg

，这里是在代码中使用上述icon.jpg ： https://i.stack.imgur.com/qW4UU.jpg

在此先感谢，并请询问是否有什么东西你想让我澄清！

来源

2017-06-06 Grace Sawyer

你给垂直居中对齐到IMG –

当我添加垂直对齐在CSS的形象，@MarkoMackic，它不会做任何事情，我也正在尝试垂直对齐的标签，而不是图像。 –

垂直对齐似乎不适用于ul或li，奇怪。 –

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元素，这是假定图像高度100像素，从而改变了所有出现到图像的实际高度

来源

2017-06-06 23:33:24

添加这些属性只需隐藏选项卡并仅显示图标。 –

对不起，我做了一个假设，我刚刚测试过，我会编辑我的答案 –

等一下，这不行，让我快速检查一下 –

可以使用Flexbox的为您的DIV以下设置，这是里面nav：

（注：我减少了填充，因此所有的菜单项将融入片断寡妇相邻）

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>

来源

2017-06-07 00:11:30 Johannes

有趣。你能解释flex的功能吗？我不认为我很理解是什么使这项工作。 –

首先它将直接的子元素放置在它的容器中沿着一个轴（水平或垂直）。其他设置可以影响子元素的分布（开始，结束，居中，均匀分布），自动缩小或增长的子元素，以及沿着横轴的对齐方式（如垂直居中在我的代码段中）。对于这样一个简短的答案来说真的太多了，但它非常灵活 - 只是谷歌“flexbox”，有很多教程和文章。唯一的缺点是它与一些较旧的浏览器不兼容。 – Johannes

如何使页眉菜单垂直对齐并将图标对齐到左侧

回答

相关问题