如何使標題菜單垂直對齊和圖標向左對齊

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