How to Make Header Menu Vertically Aligned & Icon aligned to the left
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). 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. I even tried using the align attribute directly to the image tag but it made everything align to the left as well.
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
And here is the icon.jpg used in the code above: https://i.stack.imgur.com/qW4UU.jpg
Thanks in advance, and please ask if there is something you would like me to clarify on!
2 answers
solution1
0 ACCPTED 2017-06-06 23:33:24
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
solution2
0 2017-06-07 00:11:30
You can use flexbox with the following settings for your DIV which is inside nav :
(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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.