如何使标题菜单垂直对齐和图标向左对齐

Question

I'm trying to make a header for a webpage that has a horizontal menu tab (composed of links to other html files), but I find it hard to align the icon on the same horizontal row as the menu tab while keeping the icon and tabs aligned differently (icon to the left, tabs to the right). 我正在尝试为具有水平菜单选项卡（由指向其他html文件的链接组成）的网页制作标题，但是我发现很难在保持图标和标签的对齐方式不同（左侧的图标，右侧的标签）。 When I move the icon out of the same group as the links and use css to make them aligned differently, the result is the two (icon and tabs) being in separate rows. 当我将图标与链接移出同一组并使用CSS使它们以不同的方式对齐时，结果是两个（图标和选项卡）位于单独的行中。 I even tried using the align attribute directly to the image tag but it made everything align to the left as well. 我什至尝试将align属性直接用于image标签，但它也使所有内容也都向左对齐。

So here is my code so far, using a random logo image. 到目前为止，这是我的代码，使用随机徽标图像。

<!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>

So here is an image comparing what I would like the code to do and what the code (above) is actually doing: https://i.stack.imgur.com/hTGob.jpg 因此，这是一张图像，用于比较我希望代码执行的操作和代码（实际上）的实际操作： https : //i.stack.imgur.com/hTGob.jpg

And here is the icon.jpg used in the code above: https://i.stack.imgur.com/qW4UU.jpg 这是上面的代码中使用的icon.jpg： https ://i.stack.imgur.com/qW4UU.jpg

Thanks in advance, and please ask if there is something you would like me to clarify on! 在此先感谢您，请问是否有需要我澄清的内容！

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%;
}

Replace the following css elements, this assumes the image height is 100px so change all occurrences of that to the actual height of your image 替换以下css元素，这假定图像高度为100px，因此将所有出现的图像更改为图像的实际高度

Answer 2

You can use flexbox with the following settings for your DIV which is inside nav : 您可以为nav内的DIV使用具有以下设置的flexbox：

(note: i reduced the padding so all menu items would fit into the snippet widow next to each other) （注意：我减少了填充，因此所有菜单项都可以彼此相邻地合并到片段寡妇中）

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>

如何使标题菜单垂直对齐和图标向左对齐

问题描述

2 个解决方案

解决方案1
0 已采纳 2017-06-06 23:33:24

解决方案2
0 2017-06-07 00:11:30

如何使标题菜单垂直对齐和图标向左对齐

问题描述

2 个解决方案

解决方案1 0 已采纳 2017-06-06 23:33:24

解决方案2 0 2017-06-07 00:11:30

解决方案1
0 已采纳 2017-06-06 23:33:24

解决方案2
0 2017-06-07 00:11:30