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

Question

我正在尝试为具有水平菜单选项卡（由指向其他html文件的链接组成）的网页制作标题，但是我发现很难在保持图标和标签的对齐方式不同（左侧的图标，右侧的标签）。 当我将图标与链接移出同一组并使用CSS使它们以不同的方式对齐时，结果是两个（图标和选项卡）位于单独的行中。 我什至尝试将align属性直接用于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>

因此，这是一张图像，用于比较我希望代码执行的操作和代码（实际上）的实际操作： 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

您可以为nav内的DIV使用具有以下设置的flexbox：

（注意：我减少了填充，因此所有菜单项都可以彼此相邻地合并到片段寡妇中）

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